[代码片段] 如何在contenteditable的div中设置和获取光标位置?
时间: 2023-12-10 08:03:39 浏览: 107
Vue中div contenteditable 的光标定位方法
可以通过以下代码来设置和获取 contenteditable 的 div 中的光标位置:
```javascript
// 获取光标位置
function getCaretPosition(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ((sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
// 设置光标位置
function setCaretPosition(element, pos) {
var range, selection;
if (document.createRange) {
range = document.createRange();
range.setStart(element.childNodes[0], pos);
range.collapse(true);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.moveStart("character", pos);
range.collapse(true);
range.select();
}
}
```
其中,`getCaretPosition()` 函数用于获取光标位置,`setCaretPosition()` 函数用于设置光标位置。需要注意的是,这两个函数都需要传入 contenteditable 的 div 元素作为参数。
阅读全文