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

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

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.

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

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>

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>

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