Adding bullet points to a text area?

问题

Is there a way to add bullet points to an HTML textarea?

I want to add a simple feature where a bullet point is added for every line in a text area (similar to a list bullet points).

回答1:

You can't do that but there is another way. delete the textarea.

'<section id="textarea" contenteditable="true">
<ul>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
</ul>

</section>'

回答2:

I think, you will not able to add bullet points (i.e. rich text) in text area or any other html input control.

But you may achieve result by adding Rich-text editor. OR Need to write jquery to handle the event and display the result, Like if user is simply viewing content then show that in html-css format and if user clicks on the content then show text area and allow to add more text.

<textarea id="banner-message" class="message" style="display:none">
</textarea>

<div id="display" class="message" style="overflow-y:auto">
</div>



var strings = [];
strings.push(
  "first text",
  "second text",
  "third text"
);

var htmlContent='';
var textAreaContent='';
$(document).ready(function(){
    strings.forEach(element => htmlContent += "<li>"+element+"</li>");
    $("#display").html(htmlContent);
    var i=1;
    strings.forEach(function(element){ 
    if(strings.length==i)
        textAreaContent += ">"+ element;
    else
        textAreaContent += ">"+ element+"\n";
    i++;
  });
  $("#banner-message").val(textAreaContent);  
})

$("#display").click(function(){
    $(this).css("display","none");
  $("#banner-message").css("display","");
  var currentText= $("#banner-message").val();
  //currentText+="\n>";
  $("#banner-message").val(currentText);
    $("#banner-message").focus();
});

$("#banner-message").blur(function(){
 var currentText=$("#banner-message").val();
 var plainText=currentText.replace(/>/g, "")
 var splitText=plainText.split("\n");
 console.log(splitText);
    htmlContent='';
    splitText.forEach(element => htmlContent += "<li>"+element+"</li>");
    $("#display").html(htmlContent);

    $(this).css("display","none");
  $("#display").css("display","");
})

$("#banner-message").keyup(function(e) {
   var code = e.keyCode ? e.keyCode : e.which;
   if (code == 13) {  
            var text=$(this).val();
        text+=">";
        $(this).val(text);
     }
   });

Here is a demo https://jsfiddle.net/v5unL369/1/

回答3:

As far as I know, you can't. But, you can get WYSIWYG editor where you can use bullets lists, and more (like images, bold, italic, etc .). Those WYSIWYG editor are fully customizable, so you can enable just the options you need. The most famous ones are : CKEDITOR : http://ckeditor.com/ TinyMCE : http://www.tinymce.com/

J. BENOIT.

回答4:

Just use the hexidecimal unicode value: \u2022 . So you might add bullets to new lines in this manner:

$textarea.val($textarea.val().replace(/\n/g,"\n\u2022").replace(/\r/g,"\r\u2022"))

回答5:

Simple use the below characters &#9679 for the bullets:

    <textarea rows="6" cols="20">
    &#9679 Item1
    &#9679 Item2
    &#9679 Item3
    &#9679 Item4
    &#9679 Item5
    </textarea>

回答6:

This does the job very nicely. Set BULLET to whatever character code you prefer.

<head>
    <script>
        var CRLF   = 10;
        var BULLET = String.fromCharCode(45);

        function Init() {
            if (txt.addEventListener) txt.addEventListener("input", OnInput, false);
        }

        function OnInput(event) {
            char = event.target.value.substr(-1).charCodeAt(0);
            nowLen = txt.value.length;

            if (nowLen > prevLen.value) {
                if (char == CRLF) txt.value = txt.value + BULLET + " ";
                if (nowLen == 1) txt.value = BULLET + " " + txt.value;
            }
            prevLen.value = nowLen;
        }
    </script>
</head>

<body onload="Init ();">
    <h4>Automatic bullets in a text box</h4>
    <textarea id="txt" rows="15" cols="40"></textarea>
    <input type="hidden" id="prevLen" value="0"/>
</body>

回答7:

u can just by the select change fuction through catch the id and reduce the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    $("#Projectone").focus(function () {
        if (document.getElementById('Projectone').value === '') {
            document.getElementById('Projectone').value += '• ';
        }
    });

    $("#Projectone").keyup(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            document.getElementById('Projectone').value += '• ';
        }
        var txtval = document.getElementById('Projectone').value;
        if (txtval.substr(txtval.length - 1) == '\n') {
            document.getElementById('Projectone').value = txtval.substring(0, txtval.length - 1);
        }
    });
    //Second project
    $("#Projecttwo").focus(function () {
        if (document.getElementById('Projecttwo').value === '') {
            document.getElementById('Projecttwo').value += '• ';
        }
    });

    $("#Projecttwo").keyup(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            document.getElementById('Projecttwo').value += '• ';
        }
        var txtval = document.getElementById('Projecttwo').value;
        if (txtval.substr(txtval.length - 1) == '\n') {
            document.getElementById('Projecttwo').value = txtval.substring(0, txtval.length - 1);
        }
    });


    // third project
    $("#Projectthree").focus(function () {
        if (document.getElementById('Projectthree').value === '') {
            document.getElementById('Projectthree').value += '• ';
        }
    });

    $("#Projectthree").keyup(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            document.getElementById('Projectthree').value += '• ';
        }
        var txtval = document.getElementById('Projectthree').value;
        if (txtval.substr(txtval.length - 1) == '\n') {
            document.getElementById('Projectthree').value = txtval.substring(0, txtval.length - 1);
        }
    });

    // fourth project
    $("#Projectfour").focus(function () {
        if (document.getElementById('Projectfour').value === '') {
            document.getElementById('Projectfour').value += '• ';
        }
    });

    $("#Projectfour").keyup(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            document.getElementById('Projectfour').value += '• ';
        }
        var txtval = document.getElementById('Projectfour').value;
        if (txtval.substr(txtval.length - 1) == '\n') {
            document.getElementById('Projectfour').value = txtval.substring(0, txtval.length - 1);
        }
    });

</script>

来源：https://stackoverflow.com/questions/11732789/adding-bullet-points-to-a-text-area

标签

textarea

points