How to put the cursor at the end of the text (Javascript)?

Question

JavaScript

There is an html element:

<div contenteditable="true" class="test">Некоторый текст</div>

The user can type text there, a JS code hangs on the timer, which, during the printing process, replaces some characters entered by users. The problem is that after each replacement, the text input cursor is placed in front of the text and you have to manually rearrange it to the end.
JavaScript code:

var list = document.getElementsByClassName('test'); 

function msgUpd(){
  for(i=0;i<list.length;i++){
    var rep = list[i].innerText.replace('Заменяемый текст','Замена');
    if(list[i].innerText != rep){
      list[i].innerText = rep;
      console.log('Replaced');
    }		
  }
}

setInterval(msgUpd,500);

How to move the cursor to the end of the text using JavaScript, provided that something cannot be changed in html (html is on someone else's site, but this is an extension for the site)?

Answer 1

For the lazy, I'll just throw the qwer code here :)

var input = document.querySelector("input");
input.focus();
input.selectionStart = input.value.length;

And yes, this code only works with input and other input elements.
In your case, you will have to replace it with input, because contenteditable is a little different and has its own atmosphere)

Answer 2

As far as I know, the cursor is placed by setting the selection to zero length. Those. look for how to select part of the text in the input field.

Answer 3

Actually, here .

Answer 4

make it on the input change event and you will not have to bother and everything will be replaced during the input process and not by timeout Example