Установка позиции курсора в текстовом поле jQuery

Быстрый ответ

Если вам необходимо установить курсор в определённое место текстового поля с использованием jQuery, примените следующий пример кода:

function setCursor(pos) {
  var txtArea = $('#textareaID');
  txtArea.focus().get(0).setSelectionRange(pos, pos);
}

setCursor(10); // Курсор переместится на 10-й символ, как элегантно это делают ниндзя

Просто замените textareaID на идентификатор вашего текстового поля и вызовите функцию setCursor, указав желаемую позицию символа, и всё готово!

Модификация jQuery: Совместимость и изящество

Усовершенствуем функциональность jQuery, добавив к нему функцию для цепочек вызовов, что позволит работать с кодом ещё более просто и приятно:

$.fn.setCursorPosition = function(pos) {
  return this.each(function() {
    if (this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
};

Теперь вы можете устанавливать позицию курсора изысканно, как правило настоящего кодирования:

$('#textareaID').setCursorPosition(10).val('Новый текст').setCursorPosition(0); // Вставляем текст и управляем курсором на уровне мастера тетриса

Кроссбраузерные решения: Всё под рукой!

Не забудьте о старых доверенных браузерах, чтобы ваши коды были совместимы практически с любой средой. Методы setSelectionRange и createTextRange обеспечат работоспособность вашего кода в разных браузерах, обеспечивая пользователям удобство, независимо от того, пользуются ли они Chrome, Firefox, IE8 или IE11.

Визуализация

Представьте себе позиционирование курсора как расстановку режиссёрского стула (🎬) на утренней репетиции в театре:

Исходное положение: [Текст до |быстрой коричневой лисицы, что перепрыгнула через ленивого пса.]

Для установки режиссёрского стула сразу после слова "до":

$('#textareaID').setCursorPosition('до'.length + 1); // И вот режиссёр печати уже в действии, как быстрая лисица!

После расстановки: [Текст до| быстрой коричневой лисицы, что перепрыгнула через ленивого пса.]

Унифицированное перемещение курсора в разных браузерах

Чтобы качественно привести код в соответствие с разными браузерами, рассмотрим подробнее следующее решение:

function setCursorCrossBrowser(el, pos) {
  if (el.setSelectionRange) {
    el.focus();
    el.setSelectionRange(pos, pos);
  } else if (el.createTextRange) {
    var range = el.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select(); // Аплодисменты, зрители! Спектакль начинается! 👏
  }
}

Таким образом, мы предлагаем универсальное решение, подходящее для всех браузеров.

Поведение курсора при фокусировке элемента

Мы можем сразу установить курсор в заданном месте при фокусировке на текстовом поле. Взгляните на пример реализации:

$('#textareaID').focus(function() {
  // Устанавливаем курсор в нужное место при фокусировке
  $(this).setCursorPosition(10); // Здравствуйте, десятый символ, мы не успели моргнуть!
});

Привязав функцию к событию focus, мы автоматически переместим курсор на 10-ю позицию, когда активируется текстовое поле.

Полезные материалы

1. .val() | jQuery API Documentation — узнайте больше о способах получения и установки значений в текстовых полях с помощью jQuery.
2. <textarea>: Элемент Текстового Поля – HTML: HyperText Markup Language | MDN — официальная документация HTML-элемента для работы с текстовыми полями.
3. jQuery focus() Method — подробная информация о фокусировке элементов при помощи jQuery.
4. javascript – jQuery. Установка позиции курсора в текстовом поле – Stack Overflow — обсудите вопросы, связанные с контролем позиции курсора на площадке сообщества.
5. HTMLInputElement: метод setSelectionRange() – Веб-API | MDN — освойте методы выделения текстового диапазона.
6. Selection and Range — углубитесь в тему выделения текста и работы с диапазонами в JavaScript и DOM.
7. Трюки с Textarea | CSS-Tricks – CSS-Tricks — откройте для себя набор советов и техник работы с текстовыми полями.