要保存光标在可编辑div中的位置,可以使用Range对象和Selection对象来实现。下面是一个示例代码:
HTML部分:
这是一个可编辑的div。
JavaScript部分:
function saveCursorPosition() {
var editableDiv = document.getElementById('editableDiv');
var range = window.getSelection().getRangeAt(0);
var preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(editableDiv);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
var start = preSelectionRange.toString().length;
localStorage.setItem("cursorPosition", start);
}
function restoreCursorPosition() {
var editableDiv = document.getElementById('editableDiv');
var cursorPosition = localStorage.getItem("cursorPosition");
var range = document.createRange();
var sel = window.getSelection();
var node = editableDiv.firstChild;
range.setStart(node, cursorPosition);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
在这个示例中,我们使用window.getSelection()来获取Selection对象,然后使用getRangeAt(0)来获取当前的Range对象。我们将Range对象的开始位置和结束位置保存到preSelectionRange中,并计算出光标在可编辑div中的偏移量start。然后,我们使用localStorage.setItem()将start保存到本地存储中。
在恢复光标位置的函数中,我们使用localStorage.getItem()来获取之前保存的光标位置start。然后,我们使用document.createRange()创建一个新的Range对象,并使用window.getSelection()获取Selection对象。我们将Range对象的开始位置设置为可编辑div的第一个子节点和start的偏移量,然后将Range对象折叠到起始位置。最后,我们使用sel.removeAllRanges()和sel.addRange(range)来恢复光标位置。
你可以将这些代码添加到你的项目中,并在点击保存和恢复按钮时测试它们。