怎么获取鼠标光标位置_元素contenteditable属性为true时,鼠标光标位置的问题
时间: 2024-05-15 10:13:17 浏览: 62
Vue中div contenteditable 的光标定位方法
在元素的 `contenteditable` 属性为 true 时,可以使用 `window.getSelection()` 方法来获取鼠标光标位置。
下面是一个示例代码:
```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;
}
```
调用 `getCaretPosition(element)` 函数,即可获取 `element` 元素中鼠标光标的位置。
阅读全文