Nano Hash - криптовалюты, майнинг, программирование

Сохранение и загрузка позиции курсора в текстовой области с помощью JavaScript

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

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

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

javascript web-applications position textarea caret
13.12.2010

Ответы:


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){
  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);
13.12.2010

2

После дальнейших исследований я пришел к простому решению, использующему локальное хранилище HTML5.

Вот скрипт, который я сделал для сохранения позиции каретки:

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;
    };
};

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

13.12.2010
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..