Einstellung Cursorposition in div in Spanne nicht funktioniert

Question

Ich habe eine contenteditable div mit einer Spannweite in-between:

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

ich den Cursor setzen möchten in-between:

left"> 

und

</span> 

ich verwende den folgenden Code ein:

     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(); 
         } 

Leider funktioniert dieser Code nur, wenn am Anfang etwas zwischen den Span geschrieben wird.

Kann mir bitte jemand helfen?

Vielen Dank, Lucas

Answer 1

Eine Möglichkeit, dies durch Hinzufügen eines sim   zu Ihrem HTML wird tun können:

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

Es ist vielleicht nicht wie die schönste Lösung aussehen, aber es funktioniert . Schau dir die jsfiddle an.

Dadurch wird zunächst ein Leerzeichen eingefügt