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 bu

Answer 1

I think, you will not able to add bullet points (i.e. rich text) in text area or any other html input control.

But you may achieve result by adding Rich-text editor. OR Need to write jquery to handle the event and display the result, Like if user is simply viewing content then show that in html-css format and if user clicks on the content then show text area and allow to add more text.

var strings = [];
strings.push(
  "first text",
  "second text",
  "third text"
);

var htmlContent='';
var textAreaContent='';
$(document).ready(function(){
    strings.forEach(element => htmlContent += "
"+element+"
");
    $("#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 += "
"+element+"
");
    $("#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/