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

This answer seems helpful: https://stackoverflow.com/a/57042927/5746368 — jim1427, Sep 10 '21 at 11:50

score 15 · Answer 1 · edited Mar 14 '23 at 11:44

15

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>

edited Mar 14 '23 at 11:44

Parzival

2,051
4
14
32

answered Oct 31 '13 at 15:54

Bradley Beeke

163
1
10

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. – Rick Westera Jun 20 '17 at 04:25
`contenteditable` is an amazing feature! You can apply it to any dom element – Gibolt Aug 14 '17 at 17:11

score 2 · Answer 2 · edited May 11 '22 at 14:16

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/

I forked the jsFiddle above to add functionality for users to input items to the list; see https://jsfiddle.net/v9sq62eo/1/. — Nosnetrom, Jun 07 '23 at 15:16

score 1 · Answer 3 · edited May 11 '22 at 13:51

1

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>

edited May 11 '22 at 13:51

Peter Mortensen

30,738
21
105
131

answered Feb 23 '16 at 22:13

CodeCabbie

3,098
2
19
30

This works great, just remove the redundant oninput="" attribute from the textarea html, otherwise you'll be calling it twice. – harvest316 Oct 14 '16 at 02:42
Thanks @harvest316, I've removed the redundant oninput="" from the code. – CodeCabbie Oct 14 '16 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? – Andrew Garrison Jul 15 '19 at 14:18

score 1 · Answer 4 · edited May 09 '22 at 01:11

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>

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](https://stackoverflow.com/help/promotion): *"...always explain why the solution you're presenting is appropriate and how it works"*. Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/57433349/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). — Peter Mortensen, May 11 '22 at 14:00

score 1 · Answer 5 · answered Jan 04 '23 at 09:31

1

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>

answered Jan 04 '23 at 09:31

Sarah Marciano

81
1
5

score 0 · Answer 6 · edited May 09 '22 at 00:37

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:

edited May 09 '22 at 00:37

Peter Mortensen

30,738
21
105
131

answered Jul 31 '12 at 03:57

JBENOIT

421
3
14

score 0 · Answer 7 · edited May 09 '22 at 00:52

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

edited May 09 '22 at 00:52

Peter Mortensen

30,738
21
105
131

answered Oct 28 '15 at 15:52

cage rattler

1,587
10
16

score 0 · Answer 8 · edited May 11 '22 at 13:55

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>

edited May 11 '22 at 13:55

Peter Mortensen

30,738
21
105
131

answered Jul 04 '16 at 06:27

Bilal Abdulkany

31
6

What is 9679? Unicode code point [U+25CF](https://www.utf8-chartable.de/unicode-utf8-table.pl?start=9669&number=128) (BLACK CIRCLE)? – Peter Mortensen May 11 '22 at 13:54

Adding bullet points to a text area

8 Answers8

Linked