Adding bullet points to a text area?

2019-04-02 01:19发布

问题:

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:

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.



回答3:

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



回答4:

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>


回答5:

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>