setting cursor position in span in div is not working

Question

I have a contenteditable div with a span in-between:

<div id="textArea" contenteditable><span style="font-size: 1em; font-family: Arial; text-align: left"></span></div>

I would like to set the cursor in-between:

left">

and

</span>

I use the following code:

                      var textArea = document.getElementById("textArea");

                      textArea.onfocus = function(event){
                          var range = document.createRange();
                          var node = textArea.fistChild;
                          range.setStart(node.childNodes[0], 67);
                          var sel = window.getSelection();
                          range.collapse(true);
                          sel.removeAllRanges();
                          sel.addRange(range);
                          textArea.focus();
                      }

Unfortunately, this code only works when there is something written in-between the span at the beginning.

Can somebody please help me out?

Thank you very much, Lucas

Answer 1

One way you can do this is by adding a sim   to your HTML:

<div id="textArea" contenteditable><span style="font-size: 1em; font-family: Arial; text-align: left">&nbsp;</span></div>

It might not look like the prettiest solution, but it works. Look at the jsfiddle .

This will add a blank space first