Adding bullet points to a text area

user_51281 0
Viewed 34599

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

points textarea
7 Answers

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/

user_121637450

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>
user_118353230
Related