Wie setze ich den Cursor im Child eines containEditable Elements?

Question

Ich möchte wissen, wie Sie den Cursor im Kind eines editierbaren Elements setzen. Ich habe einen Inhalt bearbeiten DIV mit einem SPAN innerhalb und ich möchte den Cursor in der SPAN, wenn der DIV geklickt wird, um zu verhindern, dass jemand in der DIV eingeben.

<div class="custom-input" spellcheck="true" contenteditable="true"> 
    "NOT HERE" 
    <span data-type="text"> 
    "TYPE HERE" 
    <br> 
    </span> 
</div> 

Ich habe versucht, dies mit .focus() in jQuery zu tun, und es funktioniert, aber es unterstreicht nur den SPAN und die Cursor in der DIV bleibt.

Ich versuche etwas wie Facebook-Chat zu machen. Der Facebook-Chat verwendet content-fähige Elemente für die Chat-Eingabe, und wenn Sie irgendwo in der Chat-Box klicken, wird der Cursor immer auf eine SPAN-Markierung fokussiert, die für die Eingabe verwendet wird.

Answer 1

Ich musste dies vor kurzem tun und das unten ist, was ich mit endete.

HINWEIS:Dies scheint hier oder auf jsFiddle wegen Sandboxing und whatnot nicht zu funktionieren. Führen Sie den Code auf Ihrem lokalen Host oder Hosted Server aus und Sie werden sehen, dass es funktioniert.

$(document).ready(function() { 
 
    var $element = $('.type-here'); 
 
      createCaretPlacer($element, false); // set cursor and select text 
 
      createCaretPlacer($element, true, true); // set cursor at start 
 
      createCaretPlacer($element, true, false); // set cursor at end 
 

 
    }); 
 

 
    function createCaretPlacer($element, collapse, atStart) { 
 
    var el = $element[0]; // get the dom node of the given element 
 
    el.focus(); // focus to the element 
 
    // feature test to see which methods to use for given browser 
 
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { 
 
     // handle real browsers (not IE) 
 
     var range = document.createRange(); // create a new range object 
 
     range.selectNodeContents(el); // add the contents of the given element to the range 
 
     if(collapse) range.collapse(atStart); // collapse the rage to either the first or last index based on "atStart" param 
 
     var sel = window.getSelection(); // Returns a Selection object representing the range of text selected by the user or the current position of the caret. 
 
     sel.removeAllRanges(); // removes all ranges from the selection, leaving the anchorNode and focusNode properties equal to null and leaving nothing selected. 
 
     sel.addRange(range); // add the range we created to the selection effectively setting the cursor position 
 
    } 
 
    else if (typeof document.body.createTextRange != "undefined") { 
 
     // handle IE 
 
     var textRange = document.body.createTextRange(); 
 
     textRange.moveToElementText(el); 
 
     if(collapse) textRange.collapse(atStart); 
 
     textRange.select(); 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-input" spellcheck="true" contenteditable="true"> 
 
    "NOT HERE" 
 
    <span data-type="text" class="type-here"> 
 
    "TYPE HERE" 
 
    <br> 
 
    </span> 
 
</div>