caret moves to the left

Asked Nov 06 '16 at 20:47

Active Nov 06 '16 at 21:08

Viewed 321 times

My situation is, that I have some kind of an inputbox in HTML (right now it's a contentEditable div) element in which I want to replace one specific word a user can type in, with one other word:

word1 = "hello";
word2 = "<b>hello</b>";
//element = some random element that supports innerHTML
element.oninput = function(){
    element.innerHTML = element.innerHTML.replace(word1, word2);
}

So if the user types "hello", it is automatically replace with a bold "hello", which works only if I use an element with the property innerHTML, so I can insert the <b>. Now my problem is, that once the innerHTML is replaced (l. 5), the caret jumps back in front of the first letter in the div:

[this is a hell|] -> [|this is a <b>hello</b>]

What can I do to prevent that from happening without using jQuery?

I can also change the element type/class, it just needs to support innerHTML...

edited Nov 06 '16 at 21:08

asked Nov 06 '16 at 20:47

d0n.key

1,318
2
18
39

Possible duplicate [Modify text in a contenteditable div without reseting the caret (cursor) position](http://stackoverflow.com/questions/24845254/modify-text-in-a-contenteditable-div-without-reseting-the-caret-cursor-positio). – LazyShpee Nov 06 '16 at 20:56
Close enough. I don't want to use jQuery. – d0n.key Nov 06 '16 at 20:58
This may help: http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div – Scott Marcus Nov 06 '16 at 20:58
Also see: http://stackoverflow.com/questions/4576694/saving-and-restoring-caret-position-for-contenteditable-div – seahorsepip Nov 06 '16 at 21:13
@ScottMarcus It doesn't work for some reason. – d0n.key Nov 06 '16 at 21:14
@Unknown There were sever suggestions that seemed to work on that page. Did you look through all of them? – Scott Marcus Nov 06 '16 at 21:15
@seahorsepip Doesn't work either. The caret stays in the first position once the word to replace is entered. – d0n.key Nov 06 '16 at 21:17
@ScottMarcus I tried the second one, as it appeared to make sense. – d0n.key Nov 06 '16 at 21:21

JavaScript / HTML: Replace word in input / contentEditable -> caret moves to the left

0 Answers0