我有一个标准内容可编辑 div:
<div id="profileBody" class="customInputDiv" contentEditable='true' autocomplete="off"></div>
基本上,我想检测光标在某个事件上的位置(最好是可在 onclick
、 keydown
或按钮上运行的代码)。
类似这样的:
onkeydown
- 保存 div 中的插入符位置,然后设置插入符位置。
这听起来有点愚蠢,但这是必需的,因为在某些事件中我会稍微更改内容,并且在进行光标位置更改时这非常烦人。
我讨厌在没有我尝试过的例子的情况下做问题,但如果你读过以前的问题,我总是非常详细地提供我尝试过的内容,只是在这里陷入了死胡同!
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
也许是解析 window.getSelection();
数据的好方法?
发现:http://jsfiddle.net/s5xAr/3/但我不想要 - 只是希望它使用函数获取插入符位置并设置它,例如
getCaretPOS();
//do something
setCaretPOS();
此代码将设置它,但获取它似乎是问题..
最佳答案
要获取插入符位置,请使用此函数:
function getCaretPosition(editableDiv) {
var caretPos = 0, containerEl = null, 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;
}
这应该适用于大多数浏览器(当然,不包括 IE)。您似乎已经用 setCaret
函数覆盖了 IE。
该函数来自another SO answer.也看看评论。
关于javascript - 内容可编辑 DIV 单击/插入符号设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12245928/