概述:
我正试图实现这样一种效果,即当用户在可编辑的 div
中键入 (
或 [
时,自动插入第二个 )
或 ]
,并将光标定位在两者之间,也就是在 (
和 )
之间。
在 --
的右边输入并查看第一行如何工作,而第二行则不起作用。
我的努力:
我正在使用这段代码(由Tim Down提供)来突出显示文本的某些部分并设置光标位置。前者有效,但后者无效 :(
function getTextNodesIn(node) { // helper
var textNodes = [];
if (node.nodeType == 3) {
textNodes.push(node);
} else {
var children = node.childNodes;
for (var i = 0, len = children.length; i < len; ++i) {
textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
}
}
return textNodes;
}
function highlightText(el, start, end) { // main
if (el.tagName === "DIV") { // content-editable div
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = getTextNodesIn(el);
var foundStart = false;
var charCount = 0,
endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++];) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else { // textarea
el.selectionStart = start;
el.selectionEnd = end;
}
}
注意:
<div>
元素会有子元素(主要是<br>
)。- 只需要使用原生JS支持Chrome浏览器。
我的问题:
- 为什么上述函数不起作用?
- 如何使其起作用?
我花了数小时寻找解决方法,但并没有找到太有用的信息。有些是关于在子 div
的开头或结尾进行设置,但对我而言,可以是任何位置,任何地方。
更新:
感谢所有人的帮助,终于完成了开发!
getCaretPosition
函数的限制吗? - Gaurang Tandon