My cursor move to the first word of my contenteditable
when I replace value

Question

When I enter a new text who replace by the function, my cursor go in the start of contenteditable. I would like my cursor stay in the last letter.

document.designMode = "on";

var text = document.getElementById('text');

let observer = new MutationObserver(mutations =>
  mutations.forEach(mutation => {
    console.log(text.textContent);
    text.textContent = text.textContent.replace('/', ' a');
  })
);

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
});

<p id="text" contenteditable="true">I'm a text will be change</p>

the Question you asked, has been asked many times, please search before posting questions. here is a good reference https://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div — NimaNr, Dec 26 '20 at 10:21

Prime · Accepted Answer · 2020-12-26T10:11:46.693

Try this one.

document.designMode = "on";

var text = document.getElementById('text');

let observer = new MutationObserver(mutations =>
  mutations.forEach(mutation => {
    console.log(text.textContent);
    text.textContent = text.textContent.replace('/', ' a');
    const range = document.createRange();
    const textNode = text.firstChild;
    range.setStart(textNode, text.textContent.length);
    range.setEnd(textNode, text.textContent.length);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  })
);

observer.observe(text, {
  childList: true,
  characterData: true,
  subtree: true,
});

<p id="text" contenteditable="true">I'm a text will be change</p>

@Camille, I updated answer. can you try this one? – Prime Dec 26 '20 at 10:12 — Prime, Dec 26 '20 at 10:12

My cursor move to the first word of my contenteditable when I replace value

1 Answers1

My cursor move to the first word of my contenteditable
when I replace value