通过JavaScript在textarea中保存和加载插入位置

Question

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

我见过jQuery的jCaret插件，但由于我的web应用程序不使用jQuery，我需要一些适用于纯JavaScript的东西。

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

Answer 1

通过一些小修改，您可以使用jCaret 而不使用jQuery。 我看了一下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){删除$, (function($,len,createRange,duplicate){
4. 删除$.fn. 来自$.fn.caret=function(options,opt2){
5. 更改var start,end,t=this[0],browser=$.browser.msie; to var start,end,t=this[0],browser=/(msie) ([\\w.]+)/.test(navigator.userAgent);
6. 在最后一行，删除jQuery,来自})(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;
    };
};

这些与设置屏幕滚动位置的类似功能相结合，似乎完美无缺！