我在如何设置contentEditable元素中的光标或插入符号索引位置方面找到了很多很好的,跨浏览器的答案,但是却没有关于如何获取或找到其索引的答案…
contentEditable
我想做的是知道此div中插入符号的索引,位于keyup。
keyup
因此,当用户键入文本时,我可以随时知道其在contentEditable元素内的光标索引。
编辑:我正在寻找div内容(文本)内的 索引 ,而不是光标坐标。
<div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? });
以下代码假定:
<div>
white-space
pre
码:
function getCaretPosition(editableDiv) { var caretPos = 0, sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); if (range.commonAncestorContainer.parentNode == editableDiv) { caretPos = range.endOffset; } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); if (range.parentElement() == editableDiv) { var tempEl = document.createElement("span"); editableDiv.insertBefore(tempEl, editableDiv.firstChild); var tempRange = range.duplicate(); tempRange.moveToElementText(tempEl); tempRange.setEndPoint("EndToEnd", range); caretPos = tempRange.text.length; } } return caretPos; } #caretposition { font-weight: bold; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div> <div id="caretposition">0</div> <script> var update = function() { $('#caretposition').html(getCaretPosition(this)); }; $('#contentbox').on("mousedown mouseup keydown keyup", update); </script>