Сохранение и загрузка позиции каретки в текстовом поле через JavaScript

Question

Я ищу способ сохранения и загрузки позиции каретки в текстовом поле в веб-приложении, так что, когда пользователь снова откроет веб-приложение, они автоматически возвращаются к тому месту, которое они оставили.

Я видел плагин jCaret для jQuery, но поскольку мое веб-приложение не использует jQuery, мне нужно что-то, что работает в чистом JavaScript.

Кроме того, что было бы лучшим способом инициировать функцию для сохранения позиции каретки? Первый метод, который приходил на ум, заключался в повторном сохранении его на каждом нажатии клавиши, но это кажется немного неэффективным. Я думал о том, что приложение сохраняет позицию через событие onBeforeUnload, но если вы можете думать о лучшем способе, поделитесь!

Answer 1

После дальнейших исследований я пришел к простому решению, которое использует 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; 
    }; 
}; 

Это, в сочетании с аналогичными функциями, чтобы установить позицию прокрутки экрана, вы, кажется, сделать трюк отлично!

Answer 2

С некоторыми незначительными модификациями вы можете использовать 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){
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, из })(jQuery,"length","createRange","duplicate");

Чтобы использовать его, вам нужно сделать следующее:

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