Adding bullet points to a text area?

Question

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).

Answer 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>'

Answer 2

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

But you may achieve the result by adding a rich-text editor.

Or you need to write jQuery code to handle the event and display the result, like if the user is simply viewing content, then show that in HTML and CSS format and if the 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/