jQuery addClass example

Change class name on click in jQuery

by csnsgiri

HTML

<textarea id="banner-message" class="message" style="display:none">
</textarea>

<div id="display" class="message" style="overflow-y:auto">
</div>


<h4>Automatic bullets in a text box</h4>
    <textarea id="txt" rows="15" cols="40"></textarea>
    <input type="hidden" id="prevLen" value="0"/>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.message {
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
  transition: all 0.2s;
  width:350px;
  height:100px;
}

JavaScript

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);
     }
   });
   
   
   
   
   
   
   
   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;
        }