Сохранение и загрузка позиции каретки в текстовой области через JavaScript - PullRequest
4 голосов
/ 13 декабря 2010

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

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

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

Ответы [ 2 ]

2 голосов
/ 13 декабря 2010

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

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

2 голосов
/ 13 декабря 2010

С некоторыми незначительными изменениями вы можете использовать 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);
...