设置光标位置contenteditable <DIV>

在前端开发中，我们经常需要创建一个可编辑的区域，这时候 contenteditable 属性就派上用场了。contenteditable 属性可以将任何 HTML 元素变为可编辑的区域，用户可以在其中输入文本、插入图片等。

但是，在某些情况下，我们需要控制光标的位置，例如在输入框中插入一段默认文字并将光标定位到指定位置。这时候，我们就需要使用 JavaScript 来设置光标位置。

获取和设置光标位置

在 JavaScript 中，我们可以通过 Selection API 来获取和设置光标位置。Selection API 提供了一组方法和属性，用于操作选中的文本和光标位置。

获取光标位置

要获取当前光标所在的位置，我们可以使用 window.getSelection() 方法来获取 Selection 对象，然后调用 getRangeAt() 方法来获取 Range 对象，最后从 Range 对象中获取 startOffset 和 endOffset 属性即可。

-- -------------------- ---- -------
-------- ------------------------- -
  ----- --------- - ----------------------
  -- --------------------- - -- -
    ----- ----- - ------------------------
    ----- ------------- - -------------------
    ------------------------------------------
    ---------------------------------------- -----------------
    ------ --------------------------------
  -
  ------ --
-

上面的代码中，我们定义了一个 getCaretPosition() 函数，传入一个元素，返回当前光标所在的位置。

设置光标位置

要设置光标位置，我们需要先获取当前选中区域的 Range 对象，然后调用 Range 对象的 setStart() 和 setEnd() 方法来设置起始和结束位置。最后，我们将 Selection 对象的范围设置为新的 Range 对象即可。

function setCaretPosition(element, position) {
  const range = document.createRange();
  const selection = window.getSelection();
  range.setStart(element.childNodes[0], position);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

上面的代码中，我们定义了一个 setCaretPosition() 函数，传入一个元素和一个位置，将光标设置到指定位置。

示例代码

下面是一个示例代码，演示如何在 contenteditable

-- -------------------- ---- -------
---- ---------- ---------------------------------------

--------
----- ----- - ---------------------------------

-- ------
----- ------------- - ------------------------
---------------------------

-- ------
----------------------- ---
---------