获取并设置内容可编辑div中的光标位置 [英] get and set cursor position in content editable div
本文介绍了获取并设置内容可编辑div中的光标位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在内容可编辑的div中,我希望获取并设置光标位置,但不考虑子元素(例如 , 等).
in a content editable div, i wish get and set cursor position but but without taking into account the child elements (, , etc for example).
for get, i find this solution : Get a range's start and end offset's relative to its parent container
但是我不知道.
请你能帮我吗?
谢谢你
推荐答案
您可以使用 rangy 自己定义它,就像这样:
You can use rangy to define it yourself, just like this:
var selector = document.querySelector('[contenteditable]');
var setCaretIndex = function (index) {
var charIndex = 0, stop = {};
var traverseNodes = function (node) {
if (node.nodeType === 3) {
var nextCharIndex = charIndex + node.length;
if (index >= charIndex && index <= nextCharIndex) {
rangy.getSelection().collapse(node, index - charIndex);
throw stop;
}
charIndex = nextCharIndex;
}
// Count an empty element as a single character. The list below may not be exhaustive.
else if (node.nodeType === 1 && /^(input|br|img|col|area|link|meta|link|param|base)$/i.test(node.nodeName)) {
charIndex += 1;
} else {
var child = node.firstChild;
while (child) {
traverseNodes(child);
child = child.nextSibling;
}
}
};
try {
traverseNodes(selector);
} catch (ex) {
if (ex !== stop) throw ex;
}
};
要使用此功能,您需要先将编辑器聚焦:
To use this function, you need to focus the editor first:
selector.focus();
然后给出一个索引来设置光标位置:
Then giving an index to set cursor position:
setCaretIndex(3);
这篇关于获取并设置内容可编辑div中的光标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文