javascript - 使用 Rangy 将键盘插入符号移动到元素的末尾

Question

我在 contenteditable 中有几个 a 元素div。如何将键盘插入符号放在由 id 标识的特定元素的末尾，然后将其移动到divusing Rangy的末尾？

在此先感谢您的帮助。

Answer 1

要在特定元素之后设置插入符号，您需要创建一个范围并将该范围应用于浏览器的选择对象，如下所示：

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the node of the element you wish to put the caret after
var startNode = document.getElementById('YourTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(startNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

在某些时候，如果您希望移动插入符号，那么您将执行与上述相同的操作以将其移动到“DIV”之后，尽管如果您希望选择范围从“A”标记之后移动到“ DIV' 标签然后你会这样做：

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(endNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

如果您希望您的选择位于元素的末尾，但在元素内部而不是在元素之后，那么您将执行类似的操作。

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the start node and at the end of the end node
//Note: the end is set using endNode.length when the node is of the text type
//and it is set using childNodes.length when the end node is of the element type
range.setStartAfter(startNode);
range.setEnd(endNode, endNode.length || endNode.childNodes.length);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

几个重要的注意事项：

1. 您不必通过 ID 获取开始或结束节点，但您必须以一种或另一种方式从 DOM 中获取 Node 对象本身。
2. 如果您修改 DOM，那么您可能会在此过程中破坏您的范围对象。这就是为什么第二个代码块重新创建范围而不是仅仅引用现有范围的工作。