Как установить курсор в дочернем элементе contentEditable?

Question

Я хочу знать, как установить курсор в дочерний элемент редактируемого элемента. У меня есть редактируемый контент DIV с SPAN внутри, и я хочу установить курсор в SPAN, когда DIV щелкнут, чтобы кто-то не набрал DIV.

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

Я пытался сделать это с .focus() в JQuery, и он работает, но это только подчеркивает SPAN и курсор остается в DIV.

Я пытаюсь сделать что-то вроде Facebook-чата. Facebook-чат использует контент-элементы для ввода чата, и если вы щелкните в любом месте в окне чата, курсор всегда сфокусирован на метке SPAN, которая используется для ввода.

Answer 1

Мне нужно было сделать это недавно, а ниже - то, с чем я закончил.

ПРИМЕЧАНИЕ:Это не будет работать здесь или на jsFiddle из-за песочницы и еще чего-то. Запустите код на локальном хосте или размещенном сервере, и вы увидите, что он работает.

$(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>