怎么获取鼠标光标位置_元素contenteditable属性为true时,鼠标光标位置的问题
时间: 2024-05-14 13:19:17 浏览: 8
获取鼠标光标位置的方式与元素是否具有 `contenteditable` 属性无关,可以通过以下代码获取鼠标光标位置:
```javascript
function getCursorPos(element) {
let cursorPos = 0;
if (document.selection) {
// IE
element.focus();
const range = document.selection.createRange();
range.moveStart('character', -element.innerText.length);
cursorPos = range.text.length;
} else if (element.selectionStart || element.selectionStart === 0) {
cursorPos = element.selectionStart;
}
return cursorPos;
}
```
其中 `element` 是你要获取光标位置的 DOM 元素。如果是 `contenteditable` 元素,可以直接将其作为参数传入。
注意,如果光标位置在最后一个字符后面,`getCursorPos` 函数返回值应该等于 `element.innerText.length`。
相关问题
在属性contenteditable为true的元素上点击时获取光标所在位置前childNodes的长度
您可以使用`window.getSelection()`函数来获取当前选中的文本范围,然后使用`anchorOffset`属性来获取光标所在位置前的字符数。具体代码如下:
```javascript
// 获取当前选中的文本范围
var selection = window.getSelection();
// 获取光标所在位置前的字符数
var cursorPos = selection.anchorOffset;
// 获取光标所在节点的父节点
var parentNode = selection.anchorNode.parentNode;
// 获取光标所在节点的所有子节点
var childNodes = parentNode.childNodes;
// 获取光标所在位置前childNodes的长度
var length = 0;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i] == selection.anchorNode) {
length += cursorPos;
break;
} else {
length += childNodes[i].textContent.length;
}
}
console.log(length);
```
需要注意的是,这段代码假定光标所在节点只有一个父节点,并且该父节点的所有子节点都是文本节点。如果您的需求不同,可能需要进行相应的修改。
在属性 contenteditable 为 true 的元素中获取光标所在位置前的html子节点数量
好的,要获取光标所在位置前的HTML子节点数量,可以先获取当前光标所在的节点对象,然后再遍历它的所有前面的兄弟节点,统计其中的HTML节点数量。
下面是实现代码:
```javascript
// 获取当前光标对象
var selection = window.getSelection();
// 获取当前光标所在的节点对象
var node = selection.anchorNode;
// 判断当前光标所在的节点是否为元素节点
if (node.nodeType === Node.ELEMENT_NODE) {
// 获取光标所在位置前面所有的兄弟节点
var siblings = Array.from(node.parentNode.childNodes).slice(0, Array.from(node.parentNode.childNodes).indexOf(node));
// 统计兄弟节点中的HTML节点数量
var count = 0;
siblings.forEach(function (sibling) {
if (sibling.nodeType === Node.ELEMENT_NODE) {
count++;
}
});
console.log('光标所在位置前的HTML子节点数量:', count);
}
```
这段代码可以用于处理属性 `contenteditable` 为 true 的元素中的内容,包括文本和 HTML 节点,并且可以获取光标所在位置前的 HTML 子节点数量。