[Solved] how to change color of first some characters based on limit and leave others as it is inside div

by


I have created a fiddle for your query. I hope that would solve your query.

$('textarea').on('input', function() {
  var word = 0,
    lastLetter;

  $('#output > span').text('');
  this.value.split('').forEach(function(letter, i) {
    if (letter === ' ' && lastLetter !== ' ') word++;
    lastLetter = letter;
    if (word < 5) {
      $('#output span:first').append(letter);
    } else {
      $('#output span:last').append(letter);
    }
  });
});

$('textarea').focus();
textarea,
#output {
  width: 500px;
  height: 10em;
  padding: 0.2em;
  margin: 0.2em;
  box-sizing: border-box;
  font: 13px arial;
  border: 1px solid silver;
  white-space: pre-wrap;
}
textarea {
  -webkit-text-fill-color: transparent;
  overflow: auto;
}
#output {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
#output span:first-of-type {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"><span></span><span></span></div>
<textarea></textarea>

0

solved how to change color of first some characters based on limit and leave others as it is inside div