我有一个 contenteditable div,在这个 div 内,我有 3 个节点
<div id="editable" contenteditable="true"><span>dear</span>world<span>hello</span></div>
在这种情况下,如果我们使用下面的代码:
console.log(document.getElementById('editable').childNodes)
我们将得到类似[span, text, span]
的内容。如何获取正在编辑的节点的索引。例如,如果用户正在编辑单词 dear
,我应该获取索引“0
”,因为它是第一个节点,如果用户正在编辑单词 >你好
,我应该得到索引“2
”
我有一个函数可以返回我正在编辑的实际节点,但我不确定是否有帮助。请参阅jsfiddle .
最佳答案
我会将文本节点包装在跨度中,因此只有元素节点,并且只需使用 jQuery 的 index()
来获取索引
$('#editable').on('keydown', function(e){
var _node = document.getSelection().anchorNode;
var node = _node.nodeType == 3 ? _node.parentNode : _node;
var index = $(this).children().index(node);
console.log( index ); // output index
}).contents().each(function(i, node) {
if (node.nodeType === 3) {
$(node).wrap('<span />');
}
});
关于javascript - 如何获取 contenteditable div 中当前正在编辑的节点的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34464540/