contenteditable = "true" 创建的文本框，文本框中有带有标签包裹的文本，如何正确的设置光标的位置

要设置光标在文本框中的正确位置，需要结合使用 Selection 和 Range 对象。

首先，获取当前的选区对象：

const selection = window.getSelection();

然后，获取当前选区所在的 Range 对象：

const range = selection.getRangeAt(0);

接下来，将 Range 对象的起点和终点都设置为要调整光标位置的节点，比如要将光标设置在某个标签包裹的文本中间：

range.setStart(node, offset);
range.setEnd(node, offset);

其中，node 是要设置光标位置的节点对象，offset 是相对于该节点的偏移量，表示光标在该节点中的位置。

最后，将当前选区重新设置为修改后的 Range 对象：

selection.removeAllRanges();
selection.addRange(range);

这样，就可以正确地设置文本框中带有标签包裹的文本的光标位置了。

相关问题

contenteditable = "true" 创建的文本框，文本框中有带有标签包裹的文本，失去焦后再次获取焦点是光标可以找到上次的位置

要在失去焦点后再次获取焦点时，让光标保持在上次的位置，可以通过记录光标位置的方式来实现。

具体实现步骤如下：

1. 在文本框失去焦点时，记录当前的选区对象和选区所在的 Range 对象：

const selection = window.getSelection();
const range = selection.getRangeAt(0);

2. 将 Range 对象的起点和终点的偏移量保存下来，以便在重新获取焦点时恢复光标位置：

const startContainer = range.startContainer;
const startOffset = range.startOffset;
const endContainer = range.endContainer;
const endOffset = range.endOffset;

3. 在文本框重新获取焦点后，将光标位置恢复到上次的位置：

const selection = window.getSelection();
const range = document.createRange();

range.setStart(startContainer, startOffset);
range.setEnd(endContainer, endOffset);

selection.removeAllRanges();
selection.addRange(range);

这样，就可以让光标在失去焦点后再次获取焦点时保持在上次的位置了。

contenteditable = "true" 创建的文本框，文本框中有带有标签的文本，如何正确的在光标处插入文本

在使用 contenteditable 属性创建的文本框中，可以通过以下方式在光标处插入文本：

1. 获取当前光标位置

可以使用以下代码获取当前光标的位置：

var selection = window.getSelection();
var range = selection.getRangeAt(0);

2. 创建新的文本节点

可以使用以下代码创建新的文本节点：

var newNode = document.createTextNode("要插入的文本");

3. 插入新的文本节点

可以使用以下代码将新的文本节点插入到光标位置：

range.insertNode(newNode);

完整的实现代码如下：

function insertTextAtCursor(text) {
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  var newNode = document.createTextNode(text);
  range.insertNode(newNode);
}

调用该函数即可在光标处插入指定的文本。