通过 JavaScript 在文本区域中保存和加载插入符位置

Question

我正在寻找一种方法来保存和加载 Web 应用程序中文本区域中的插入符位置，以便当用户重新打开 Web 应用程序时，它们会自动返回到他们离开的位置。

我已经看到了 jQuery 的 jCaret 插件，但由于我的 Web 应用程序不使用 jQuery，所以我需要可以在纯 JavaScript 中运行的东西。

另外，启动该功能以保存插入符位置的最佳方式是什么？我想到的第一个方法是在每次按键时重新保存它，但这似乎有点低效。我一直在考虑让应用程序通过 onBeforeUnload 事件保存位置，但如果您能想到更好的方法，请分享！

Answer 1

通过一些小的修改，您可以在不使用 jQuery 的情况下使用 jCaret。我查看了 jCaret 源代码，它使用 jQuery 完成两件事：使用 jQuery 选择器提供元素，以及测试浏览器是否为 IE。摆脱这些，你就可以上路了。

更详细的说明：

1. 下载 jCaret 的未压缩源代码：http://examplet。 buss.hk/download/download.php?plugin=caret.1.02
2. 将 var caret; 添加到顶部。
3. 从 (function($,len,createRange,duplicate){ 中删除 $,
4. 从 $.fn 中删除 $.fn. .caret=function(options,opt2){
5. 将 var start,end,t=this[0],browser=$.browser.msie; 更改为 var start,end ,t=this[0],browser=/(msie) ([\w.]+)/.test(navigator.userAgent);
6. 在最后一行中，删除 jQuery, from })(jQuery,"length","createRange","duplicate");

要使用它，您需要执行以下操作：

caret.call([document.getElementById("myText")], options, opt2);

Answer 2

经过进一步研究，我找到了一个使用 HTML5 localStorage 的简单解决方案。

这是我为保存插入符号位置而编写的脚本：

function caretPositionSave() { 
    window.localStorage.setItem("CaretPosition", document.querySelector("#editor").selectionStart);
};

另一个用于加载它的脚本：

function caretPositionLoad() {
    document.querySelector("#editor").focus();
    if (localStorage.CaretPosition) {
        document.querySelector("#editor").selectionStart = localStorage.CaretPosition;
    };
};

这些与设置屏幕滚动位置的类似函数相结合，似乎完美地完成了这一任务！