Flag characters that exceed limit in textarea like on Twitter

Question

I have this javascript function that counts typed characters in a textarea and shows the user:

function countPublishCharactersAbout(val) {
    var len = val.value.length;
    var count = 240 - len;

    if (count < 0) {
        $('#about-textarea-counter').html('<span class="text-danger">' + count + '</span>');
    } else {
        $('#about-textarea-counter').html('<span>' + count + '</span>');
    }
}

That way, I call her using the event onkeyup:

<textarea class="form-control" name="" onkeyup="countPublishCharactersAbout(this)" style="resize: none"></textarea>

When exceeding the limit (in this case, 240 characters) the count is negative and red, but I want to implement an effect equal to what happens on Twitter, where characters that are exceeding the limit are signaled in red, as the image below.

Answer 1

To have stylized text parts you have to use one div[contenteditable="true"]. To textarea does not allow this.

So you can add to your code .slice() to generate parts of the text. What is within the limits (240 characters) and what is too long.

Together in my example a function of Tim Down to place the cursor at the end of the div for when typing.

function countPublishCharactersAbout(element) {
    var text = element.innerText || element.textContent;
    var len = text.length;
    var count = 240 - len;
    if (count < 0) {
        $('#about-textarea-counter').html('<span class="text-danger">' + count + '</span>');
        var ok = text.slice(0, 240);
        var resto = text.slice(241);
        element.innerHTML = ok + '<span>' + resto + '</span>';
        placeCaretAtEnd(element);
    } else {
        $('#about-textarea-counter').html('<span>' + count + '</span>');
    }
}

Example:

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

function countPublishCharactersAbout(element) {
  var text = element.innerText || element.textContent;
  var len = text.length;
  var count = 240 - len;
  if (count < 0) {
    $('#about-textarea-counter').html('<span class="text-danger">' + count + '</span>');
    var ok = text.slice(0, 240);
    var resto = text.slice(241);
    element.innerHTML = ok + '<span>' + resto + '</span>';
    placeCaretAtEnd(element);
  } else {
    $('#about-textarea-counter').html('<span>' + count + '</span>');
  }
}

.form-control {
  height: 300px;
  width: 400px;
}

.form-control span {
  background-color: #fcc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="about-textarea-counter"></div>
<div contenteditable="true" class="form-control" name="" onkeyup="countPublishCharactersAbout(this)" style="resize: none"></div>

jsFiddle: http://jsfiddle.net/62s11306/