0

Bem, eu estou tendo problemas com uma Div "contenteditable", que resumidamente utiliza ".replace() e regex" com um pouco de jquery para ser capaz de trabalhar com um conteúdo dinâmico, o problema em geral, é que a posição do cursor ou melhor dizendo "caret" está sofrendo um bug visual. O caret fica sempre na posição "start" ou inicial, quando deveria ser posicionado ao fim de cada letra ou palavra digitada.

Segue abaixo o meu código simplificado:

list = ['cat', 'bird'];
reg = new RegExp(list.join("|"), 'gi');
$("#editable").bind('input propertychange', function(event) {
  document.getElementById('editable').innerHTML = $(this).html().replace(reg, "dog");
});
		* {box-sizing: border-box;}
		.si{min-width: 100%;min-height: 100%;}
		.def{background-color: cadetblue; color: white; padding: 0.5rem;}
		#content{height: 12rem;width: 100%;overflow-x: auto;overflow-y: auto;position: relative;resize: both;}
		#editable * {white-space:pre!important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<main id="content">
		<div contenteditable="true" id="editable" spellcheck="false" class="si def"></div>
	</main>

Eu também já tentei utilizar alguns truques como por exemplo:

    document.getElementById('editable').focus();
    document.execCommand('selectAll', false, null);
    document.getSelection().collapseToEnd();

Porém, essa solução me causa outro bug visual: percebi que ao tentar apagar qualquer conteúdo dentro da div, em qualquer posição, usando "backspace", o caret é enviado até o fim do elemento. Essa é a finalidade do código, enviar o caret até o fim, mas não é isso que eu gostaria de obter.

Simplificando, eu gostaria de uma solução para posicionar o caret corretamente dentro da Div, considerando que eu também quero posiciona-lo corretamente quando "backspace".

Qualquer outra correção a nível de css/html é bem-vinda, mas apenas lembrando que usar "textarea" não é o meu objetivo.

Obrigado desde já.

2
  • Dificilmente vc irá conseguir fazer isso. Eu pelo menos estava fazendo algo desse tipo com div editável e passei 3 dias tentando isso e não consegui. Vc teria que fazer uma função que retorne a posição do caret, mas com div editável isso não funciona direito porque quando você tecla ENTER, é criada uma div que faz a quebra de linha, e você teria que buscar a posição do caret dentro dessa div e não da div principal, o que é um problema. Se a sua div pretende conter apenas texto puro, use textarea que é a "mesma coisa" e os métodos de posicionar o caret funcionam bem nele.
    – Meu ovo
    15/07/2019 às 23:42
  • Sim fazem 20 dias, eu já criei inúmeros documentos, e o penúltimo deles funcionou corretamente, porém em questão de otimização, deixa um pouco a desejar e tem alguns bugs no firefox, por isso eu criei essa versão simplificada, para achar uma solução que me ajude nessa questão, assim eu terei a ultima peça do quebra-cabeça. Textarea realmente é melhor para trabalhar com o caret, mas não vem ao caso, porque eu não quero adicionar apenas texto. De qualquer forma, obrigado!
    – Lima
    15/07/2019 às 23:53

0

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

Pesquise outras perguntas com a tag .