有人知道如何以与 range.moveStart 在 IE 中相同的方式使用 range.setStart 吗?我想在 JS 中实现退格/删除,如下所示:
range.moveStart('字符',-1); range.deleteContents();
但在火狐中
有人知道如何以与 range.moveStart 在 IE 中相同的方式使用 range.setStart 吗?我想在 JS 中实现退格/删除,如下所示:
range.moveStart('字符',-1); range.deleteContents();
但在火狐中
Firefox 以及除 IE <= 8 之外的所有现代浏览器都使用DOM Ranges。moveStart
与 IE 的方法没有直接的类似之处TextRange
,而且在一般情况下很难做到。如果范围在文本节点内而不是在开头,这很容易;否则,您需要在文档中向后走以找到前面的文本节点并将范围移动到其中。以下仅适用于单个文本节点:
function backspace() {
var sel = window.getSelection();
// If there is a selection rather than a caret, just delete the selection
if (!sel.isCollapsed) {
sel.deleteFromDocument();
} else if (sel.rangeCount) {
var range = sel.getRangeAt(0);
if (range.startContainer.nodeType == 3 && range.startOffset > 0) {
range.setStart(range.startContainer, range.startOffset - 1);
sel.removeAllRanges();
sel.addRange(range);
sel.deleteFromDocument();
}
}
}
WebKit 和 Firefox 4 都有对象的修改方法,Selection
彻底解决了这个问题:
function backspace2() {
var sel = window.getSelection();
// If there is a selection rather than a caret, just delete the selection
if (!sel.isCollapsed) {
sel.deleteFromDocument();
} else if (sel.rangeCount && sel.modify) {
sel.modify("extend", "backward", "character");
sel.deleteFromDocument();
}
}
Here’s a function to expand selection to cover full words:
document.body.addEventListener('keydown', ({key}) => {
if (key === 'Enter') {
getWordRange();
}
});
function getWordRange() {
const range = document.getSelection().getRangeAt(0);
const {startContainer, startOffset, endContainer, endOffset} = range;
const treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
);
treeWalker.currentNode = startContainer;
do {
const container = treeWalker.currentNode;
const content = container === startContainer
? container.textContent.substr(0, startOffset)
: container.textContent;
const offset = content.lastIndexOf(' ') + 1;
range.setStart(container, 0);
if (offset) {
range.setStart(container, offset);
break;
}
} while (treeWalker.previousNode());
treeWalker.currentNode = endContainer;
do {
const container = treeWalker.currentNode;
const content = container === endContainer
? container.textContent.substr(endOffset)
: container.textContent;
const offset = content.indexOf(' ');
const actualOffset = offset + container.textContent.length - content.length;
range.setEnd(container, content.length);
if (offset !== -1) {
range.setEnd(container, actualOffset);
break;
}
} while (treeWalker.nextNode());
}
<p>
Select text then hit Enter to expand selection to word edges.<br>
Works with <b>nested <i>tags</i></b> as well.
</p>