我看到了这篇文章,它展示了 2 个关于如何从一个内容可编辑的 div 中保存和恢复选定文本的函数。我将下面的 div 设置为 contenteditable 和另一篇文章中的 2 函数。如何使用这些功能来保存和恢复选定的文本。
<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>
<script>
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
</script>
最佳答案
典型的用途是显示某种小部件或对话框以接受来自用户的输入(因此可能会破坏原始选择)并在该小部件被隐藏后恢复选择。实际上使用这些功能非常简单;最大的危险是在选择已经被销毁后试图保存它。
这是一个简单的例子。它显示文本输入并覆盖可编辑的选择 <div>
使用该输入中的文本。请注意,此代码在 document.selection
中支持 Internet Explorer <= 8现在可以在 2022 年删除的分支:
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
function insertTextAtCursor(text) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text)
range.insertNode(textNode);
sel.removeAllRanges();
range = range.cloneRange();
range.selectNode(textNode);
range.collapse(false);
sel.addRange(range);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.pasteHTML(text);
range.select();
}
}
var selRange;
function displayTextInserter() {
selRange = saveSelection();
document.getElementById("textInserter").style.display = "block";
document.getElementById("textToInsert").focus();
}
function insertText() {
var text = document.getElementById("textToInsert").value;
document.getElementById("textInserter").style.display = "none";
restoreSelection(selRange);
document.getElementById("test").focus();
insertTextAtCursor(text);
}
#textInserter {
display: none;
}
<div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();" value="Insert text">
<div id="textInserter">
<input type="text" id="textToInsert">
<input type="button" onclick="insertText()" value="Insert">
</div>
关于javascript - contenteditable 选定的文本保存和恢复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4687808/