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á.