Flag characters that exceed limit in textarea as in Twitter

Question

Flag characters that exceed limit in textarea as in Twitter

Navigation

#1 by (1 votes)

1

I have this javascript function that counts characters typed in 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>');
    }
}

In this way, I call it using the onkeyup event:

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

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

javascript jquery

asked by anonymous 10.05.2015 / 23:41

1 answer

How to return a boolean on the button Creation of index in table

score 1 · Accepted Answer

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

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

In my example a Tim Down function to put the cursor at the end of the div for when writing .

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><divid="about-textarea-counter"></div>
<div contenteditable="true" class="form-control" name="" onkeyup="countPublishCharactersAbout(this)" style="resize: none"></div>

Flag characters that exceed limit in textarea as in Twitter

1 answer

Example:

jsFiddle: link