1

Possuo essa função javascript que faz a contagem de caracteres digitados numa textarea e mostra ao usuário:

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

Dessa maneira, chamo ela usando o evento onkeyup:

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

Ao ultrapassar o limite (nesse caso, de 240 caracteres) a contagem fica negativa e vermelha, porém quero implementar um efeito igual ao que acontece no Twitter, onde os caracteres que estejam ultrapassando o limite são sinalizados em vermelho, conforme a imagem abaixo.

inserir a descrição da imagem aqui

2
  • Tenho uma notícia boa e uma ruim: A boa é que isso é mais simples do que parece de fazer. A ruim é que não é possível fazer em uma textarea. Commented 10/05/2015 às 22:28
  • Provavelmente se utiliza uma div contenteditable, né? Commented 10/05/2015 às 22:42

1 Resposta 1

1

Para teres partes do texto estilizados tens de usar uma div[contenteditable="true"]. A textarea não permite isso.

Assim podes acrescentar ao teu código .slice() para gerar partes do texto. O que está dentro dos limites (240 caracteres) e o que é longo demais.

Junto no meu exemplo uma função do Tim Down para colocar o cursor no fim da div para quando se estiver a escrever.

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

Exemplo:

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/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .