在属性contenteditable为true的元素上点击时获取光标所在位置前childNodes的长度
时间: 2024-03-20 10:43:35 浏览: 171
您可以使用`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节点,点击改元素时获取光标所在位置前childNodes的长度
好的,针对你的问题,我可以提供以下代码来获取光标所在位置前childNodes的长度:
```javascript
// 获取当前光标对象
var selection = window.getSelection();
// 获取当前光标所在的节点对象
var node = selection.anchorNode;
// 判断当前光标所在的节点是否为文本节点
if (node.nodeType === Node.TEXT_NODE) {
// 获取光标所在位置前面所有的子节点
var childNodes = node.parentNode.childNodes;
// 获取当前光标在文本节点中的偏移量
var offset = selection.anchorOffset;
// 遍历子节点,计算光标所在位置前的子节点数量
var count = 0;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
if (childNode === node) {
count += offset;
break;
} else {
count += childNode.textContent.length;
}
}
console.log('光标所在位置前childNodes的长度:', count);
}
```
这段代码可以用于处理属性 `contenteditable` 为 true 的元素中的内容,包括文本和 HTML 节点,并且可以获取光标所在位置前的子节点数量。
在属性 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 子节点数量。
阅读全文