4

Possuo uma div com contenteditable="true" e gostaria que o texto que passar de 10 caracteres fique taxado com background vermelho, como acontece no Twitter.

A minha dúvida principal é como taxar apenas o texto excedente, se tem como fazer isso só com CSS ou é necessário ir pro JavaScript, e como fazer, pois é o que não sei..

inserir a descrição da imagem aqui

2
  • Seria legal postar o que tentou e o que não deu certo. Da forma como está, é um tanto ampla a pergunta, visto que não dá pra saber onde exatamente está sua dificuldade.
    – Largato
    Commented 30/07/2016 às 20:46
  • @Bacco resumi a pergunta.
    – Elaine
    Commented 30/07/2016 às 22:35

3 Respostas 3

2

Aqui vai uma sugestão para o estilo, vou deixar o resultado final aqui no começo:

var span = document.getElementsByTagName('span')[0];

function getCaretPosition(element) {
  var caretOffset = 0;
  if (typeof window.getSelection != "undefined") {
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
  } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var textRange = document.selection.createRange();
    var preCaretTextRange = document.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}
function setCaret(el, pos) {
  for (var i = 0; i < el.childNodes.length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType == 3) {
      if (node.length >= pos) {
        var range = document.createRange(),
          sel = window.getSelection();
        range.setStart(node, pos);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        return -1;
      } else {
        pos -= node.length;
      }
    } else {
      pos = setCaret(node, pos);
      if (pos == -1) {
        return -1;
      }
    }
  }
  return pos;
}

function detectIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    if (msie > 0) return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    var trident = ua.indexOf('Trident/');
    if (trident > 0) { 
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }
    var edge = ua.indexOf('Edge/');
    if (edge > 0) return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    return false;
}

var caretPositions = [];
var contents = [];
var maxLength = 10;
var event;
var div = document.getElementsByTagName('div')[0];

if(detectIE() == false){ 
	event = "input" 
}else{
	event = "keyup"; 
}
div.addEventListener(event, insertMark); 
function insertMark(e) {
  var self = e.target;
  var content = self.textContent; 
  caretPositions.push(getCaretPosition(this)); 
  contents.push(content);
  if (contents[contents.length - 1] != contents[contents.length - 2]) {
    if (content.length > maxLength) {
      self.innerHTML = content.substring(0, maxLength) + "<span class='marker'>" + content.substring(maxLength, content.length) + "</span>";
    } else {
      self.innerHTML = content;
    }
    setCaret(self, (caretPositions[caretPositions.length - 1]));
  }
}
div.addEventListener('click', function() {
  caretPositions.push(getCaretPosition(this)); 
})
div {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  background: #fff;
  border: 1px solid #666;
  padding: 7px;
  line-height: 20px;
  border-radius: 3px;
}
div span {
  background: rgba(230, 0, 0, 0.5);
  border-radius: 3px;
  line-height: 20px;
}
<div contenteditable></div>

Passos:

  • Verificar a quantidade de caracteres ignorando tags
  • Criar uma <span> com background vermelho para colocar o que tiver depois de 10 chars dentro dela
  • Atribuir a concatenação ao evento keyup se o usuário estiver usando o IE, e ao input caso contrário
  • Capturar a posição do caret e "setá-lo" para que no momento do replace o pipe não se mova

Os dois primeiros passos são bem simples então não vou focar muito neles.

Função para capturar a posição do caret em uma div contenteditable:

function getCaretPosition(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

Diponível em: https://stackoverflow.com/questions/16736680/get-caret-position-in-contenteditable-div-including-tags

Função setCaret:

function setCaret(el, pos) {
  for (var node of el.childNodes) {
    if (node.nodeType == 3) { 
      if (node.length >= pos) {        
        var range = document.createRange(),
            sel = window.getSelection();
        range.setStart(node, pos);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        return -1;
      } else {
        pos -= node.length;
      }
    } else {
      pos = setCaret(node, pos);
      if (pos == -1) {
        return -1; 
      }
    }
  }
  return pos;
}

Disponível em: https://stackoverflow.com/questions/36869503/set-caret-position-in-contenteditable-div-that-has-children

Função para reconhecer IE:

function detectIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    if (msie > 0) return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    var trident = ua.indexOf('Trident/');
    if (trident > 0) { 
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }
    var edge = ua.indexOf('Edge/');
    if (edge > 0) return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    return false;
}

Incluindo o <span>:

var caretPositions = []; // array com as posições dos cursores
var contentLengths = []; // array com as conteudos da tag
var maxLength = 10; // máximo de caracteres
var event; // receberá o evento
var div = document.getElementsByTagName('div')[0]; // div contenteditable

if(detectIE() == false){ 
    event = "input" // se não estiver usando o IE usar "input" 
}else{
    event = "keyup"; // se estiver usando o IE usar "keyup"
}
div.addEventListener(event, insertMark); // atribui a adição ao evento keyup  ou input
function insertMark(e) {
  var self = e.target; // captura o elemento em questão
  var content = self.textContent; // captura somente o text escrito na div, sem tags
  caretPositions.push(getCaretPosition(this)); 
  contents.push(content); // adiciona ao array o conteúdo da tag a cada adição
  // só executa o bloco de código de houver tido alguma mudança no tag (ignorando navegação com as setas, por exemplo)
  if (contents[contents.length - 1] != contents[contents.length - 2]) {
    if (content.length > maxLength) {
      // seleciona do primeiro ao 10º char e concatena com uma <span> com estilo predefinido que irá conter do 10º ao último char
      self.innerHTML = content.substring(0, maxLength) + "<span class='marker'>" + content.substring(maxLength, content.length) + "</span>";
    } else {
      self.innerHTML = content; // retira a marcação 
    }
    // sempre que houver a mudança no conteúdo da div, o curso irá pro início do text, e como não se quer isso:
    setCaret(self, (caretPositions[caretPositions.length - 1])); // colocar o cursor no mesmo lugar de antes
  }
}
div.addEventListener('click', function() {
  caretPositions.push(getCaretPosition(this)); // adiciona a posição do curso ao array definido a cada click
})

Obs:

  • Estou usando o textContent para capturar oconteúdo, mas também existe a opção de innerText, veja a diferença aqui
  • Uso uma função para verificar se o user está no IE, a única diferença é um pequeno delay na renderização do marcado, já que o IE não suporta input em uma div contenteditable
4
  • 1
    Eu gostei da demonstração, etc, e até upei a resposta, só fico preocupado com a seguinte situação: Normalmente se usa contenteditable pra conteúdo WYSIWYG, com formatação, imagens, bullets, etc. Fico pensando o que aconteceria neste caso. Outra coisa é dar uma revisada no IE, o JS está quebrando.
    – Largato
    Commented 31/07/2016 às 12:47
  • 1
    @Bacco, obrigado. Quanto às questões do uso para o conteúdo WYSIWYG são mais aprofundadas e devem ter cuidados a mais, pensei basicamente na questão da AP para marcação dos caracteres excedentes. Já o problema no IE, está basicamente no uso do for ...of e do evento input, mas estou conseguindo contornar e já edito a resposta. Commented 31/07/2016 às 13:29
  • @Bacco, editei a resposta, tive que reconhecer se o user estava no IE, já que não consegui atribuir evento input a div, nem nenhum "parecido" como "DOMCharacterDataModified", ao invés disso uso o keyup que tem um pequeno delay, mas nos outros browsers o input funciona e o delay não acontece. Commented 31/07/2016 às 15:27
  • 1
    Essa parte é chatinha mesmo de fazer cross browser.
    – Largato
    Commented 31/07/2016 às 16:55
1

Bom, sua pergunta está muito genérica, mas eu faria da seguinte maneira:

    <div><p id="meuParagrafo" onkeydown="validarTexto()">
Meu texto que quero transformar aqui</p></div>

No código Javascript:

   // Função invocada toda vez que o usuário aperta uma tecla
   function validarTexto(){
   var p = document.getElmentById('meuParagrafo').innerHTML; 
   if(p.length > 10){ // Verifica se tem mais de 10 caracteres

    // Aqui, você deve aplicar o estilo de fonte desejada
    // nos caracteres a partir do décimo elemento.
    }
}
1
  • A forma de como aplicar o estilo que é o foco da pergunta, editei a questão.
    – Elaine
    Commented 30/07/2016 às 22:32
0

Para fazer isso basta pegar a propriedade .innerHTML da div, verificar se o tamanho de caracteres é maior que o limite, então usar a função substring para cortar a string e adicionar uma classe HTML à última parte dela, então definir o .innerHTML da div com os cortes feitos no mesmo. Caso a quantia de caracteres não excede o limite, você tem que tirar qualquer elemento com a classe adicionada.

PS: A função getCaretPosition serve para pegar a posição do ponteiro no texto, enquanto setCaretPosition serve para definir a posição do ponteiro no texto.

// essa função pertence à: http://stackoverflow.com/q/4811822/#4812022
// retorna a posição do ponteiro no texto
function getCaretPosition(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection !== "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type !== "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

// essa função pertence à: http://stackoverflow.com/q/512528/#512542
// define a posição do ponteiro no texto
function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);
    if(elem !== null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }else{
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            } else elem.focus();
        }
    }
}

// limite de caracteres no texto
var divLimit = 20;

// checa o texto da div
function checkDivText() {
    var inner = div.innerText;
    if(inner.length > divLimit) {
        var caretPos = getCaretPosition(div);
        // adiciona a classe "except" para os caracteres de excesso
        div.innerText =
                inner.substring(0, divLimit + 1) +
                '<span class="except">' +
                    inner.substring(divLimit + 1) +
                '</span>';
        setCaretPosition(div, caretPos);
    }else if(div.querySelector('except')) {
        var caretPos = getCaretPosition(div);
        div.innerText = inner;
        setCaretPosition(div, caretPos);
    }
}

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 .