Adding bullet points to a text area

Asked 31/7, 2012 at 3:48 Answered 4/1, 2023 at 9:31

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

Halfpint answered 31/7, 2012 at 3:48 Comment(1)

This answer seems helpful: https://mcmap.net/q/1162063/-add-bullets-to-each-new-line-within-a-textarea – Donohue 10/9, 2021 at 11:50

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>

Aikoail answered 31/10, 2013 at 15:54 Comment(2)

Note that contenteditable allows the user to do things like paste rich html text into a list item. For many this might be an unwanted side effect. – Chalaza 20/6, 2017 at 4:25

contenteditable is an amazing feature! You can apply it to any dom element – Devinna 14/8, 2017 at 17:11

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/

Hodgson answered 20/11, 2019 at 11:15 Comment(1)

I forked the jsFiddle above to add functionality for users to input items to the list; see jsfiddle.net/v9sq62eo/1. – Carlacarlee 7/6, 2023 at 15:16

For anyone else who come accross this problem, here is how I did it:

.text-area {
  display: list-item;
  margin-left : 1em;
  outline: none;
}
.text-area div {
  display: list-item;
}

<div class="text-area" contenteditable="true">
  
</div>

Hiatt answered 4/1, 2023 at 9:31 Comment(1)

The question was about textarea. What you have shown is adding bullet in text within <div>. An example here. – Jugglery 26/8 at 14:25

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>

Baileybailie answered 23/2, 2016 at 22:13 Comment(3)

This works great, just remove the redundant oninput="" attribute from the textarea html, otherwise you'll be calling it twice. – Roethke 14/10, 2016 at 2:42

Thanks @harvest316, I've removed the redundant oninput="" from the code. – Baileybailie 14/10, 2016 at 14:46

This works good, however, it doesn't add a new bullet when you are in the middle of the text contents and press enter. Just when you are at the end of the current text value. Any idea how you could get that working? – Galina 15/7, 2019 at 14:18

You can just do it by the select change function through catching 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>
</body>
</html>

Ignoramus answered 9/8, 2019 at 15:40 Comment(1)

How does this answer the question? There are some bullet point characters in there ("•"). An explanation would be in order. E.g., what do you mean by "catching the id" and "reduce the code". What is the idea/gist? From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Thirtytwomo 11/5, 2022 at 14:0

As far as I know, you can't.

But, you can get a WYSIWYG editor where you can use bullets lists, and more (like images, bold, italic, etc.).

Those WYSIWYG editors are fully customizable, so you can enable just the options you need.

The most famous ones are:

Enneagon answered 31/7, 2012 at 3:57 Comment(0)

Just use the hexadecimal Unicode value: \u2022 (BULLET). 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"))

Tatary answered 28/10, 2015 at 15:52 Comment(0)

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>

Unmanly answered 4/7, 2016 at 6:27 Comment(1)

What is 9679? Unicode code point U+25CF (BLACK CIRCLE)? – Thirtytwomo 11/5, 2022 at 13:54

Recommended topics

Hot tags