如何在 contentEditable 元素的子元素中设置光标？

Question

我想知道如何在可编辑元素的子元素中设置光标。我有一个内容可编辑的 DIV，里面有一个 SPAN，我想在单击 DIV 时将光标设置在 SPAN 中，以防止有人在 DIV 中输入。

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

我曾尝试在 jQuery 中使用 .focus() 来执行此操作，它可以工作，但它只是突出显示 SPAN，而光标仍保留在 DIV 中。

我正在尝试制作类似于 Facebook 聊天功能的东西。 Facebook 聊天使用 contenteditable 元素进行聊天输入，如果您单击聊天框中的任意位置，光标始终聚焦在用于输入的 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>