Как установить позицию курсора в текстовом поле с помощью jQuery? У меня есть текстовое поле с содержимым, и я хочу, чтобы курсор пользователя располагался с определенным смещением, когда он фокусируется на поле. Код должен выглядеть примерно так:
$('#input').focus(function() {
$(this).setCursorPosition(4);
});
Как будет выглядеть реализация этой функции setCursorPosition? Если у вас есть текстовое поле с содержимым abcdefg, этот вызов приведет к позиционированию курсора следующим образом: abcd ** | ** efg.
Java имеет аналогичную функцию setCaretPosition. Существует ли подобный метод для JavaScript?
Обновление: я изменил код CMS для работы с jQuery следующим образом:
new function($) {
$.fn.setCursorPosition = function(pos) {
if (this.setSelectionRange) {
this.setSelectionRange(pos, pos);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
if(pos < 0) {
pos = $(this).val().length + pos;
}
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
javascript
jquery
html
textfield
jcnnghm
источник
источник
$(this).get(0).setSelectionRange)
? Вы знаете, что это точно так жеthis.setSelectionRange
, только медленнее и труднее читать, верно? JQuery здесь буквально ничего не делает для вас.Ответы:
У меня есть две функции:
Тогда вы можете использовать setCaretToPos следующим образом:
Живой пример с a
textarea
и aninput
, демонстрирующий использование из jQuery:Показать фрагмент кода
По состоянию на 2016 год тестировался и работал на Chrome, Firefox, IE11, даже на IE8 (см. Последнее здесь ; фрагменты стека не поддерживают IE8).
источник
textarea
(иinput
) на Chrome, Firefox, IE8 и IE11.Вот решение jQuery:
С этим вы можете сделать
источник
selectRange($('.my_input')[0], 3, 5)
если вы уже используете jQuery. Кроме того, он должен работать с более чем одним элементом, если вам это нужно, по любой причине. Если вы хотите чистый нативный, пожалуйста, используйте решение CMS.$('#elem').focus()
заранее, чтобы появился мигающий курсор.Решения здесь правильные, за исключением кода расширения jQuery.
Функция расширения должна перебирать каждый выбранный элемент и возвращаться
this
для поддержки цепочки. Вот правильный вариант:источник
return this.each(function...)
и удалить автономную линию.Я нашел решение, которое работает для меня:
Теперь вы можете переместить фокус в конец любого элемента, вызвав:
Или вы указываете позицию.
источник
this.scrollTop(this[0].scrollHeight);
чтобы сделать видимой точку вставки.Это сработало для меня в Safari 5 на Mac OSX, jQuery 1.4:
источник
Я понимаю, что это очень старая статья, но я подумал, что должен предложить, возможно, более простое решение, чтобы обновить ее, используя только jQuery.
Использование ctrl-enter для добавления новой строки (как в Facebook):
Я открыт для критики. Спасибо.
ОБНОВЛЕНИЕ: Это решение не позволяет работать нормальной функции копирования и вставки (т.е. ctrl-c, ctrl-v), поэтому мне придется отредактировать это в будущем, чтобы убедиться, что часть работает снова. Если у вас есть идея, как это сделать, пожалуйста, прокомментируйте здесь, и я буду рад проверить это. Спасибо.
источник
В IE для перемещения курсора на какую-то позицию этого кода достаточно:
источник
Я использую это: http://plugins.jquery.com/project/jCaret
источник
Установить фокус перед тем, как вставить текст в текстовое поле?
источник
Это работает для меня в Chrome
По-видимому, вам нужна задержка в микросекунду или больше, потому что обычно пользователь фокусируется на текстовом поле, щелкая мышью по какой-то позиции в текстовом поле (или нажимая клавишу табуляции), которую вы хотите переопределить, поэтому вам придется подождать, пока позиция не станет установить пользователем нажмите и затем измените его.
источник
Просто не забывайте возвращать false сразу после вызова функции, если вы используете клавиши со стрелками, так как в противном случае Chrome обманывает фрак.
источник
return false;
. Вы хотитеevent.preventDefault();
вместо этого. Если вы возвращаете false, вы подразумеваете,event.stopPropagation()
что не всегда желательноОсновываясь на этом вопроса , ответ не будет работать идеально для ie и opera, когда в текстовой области появится новая строка. В ответе объясняется, как настроить selectionStart, selectionEnd перед вызовом setSelectionRange.
Я попытался настроитьOffset из другого вопроса с решением, предложенным @AVProgrammer, и он работает.
источник
Небольшая модификация кода, который я нашел в bitbucket
Код теперь может выбирать / выделять с начальной / конечной точки, если дано 2 позиции. Проверено и отлично работает в FF / Chrome / IE9 / Opera.
Код указан ниже, изменилось только несколько строк:
источник
Я должен был заставить это работать для contenteditable элементов и jQuery и подумал, что кто-то может захотеть, чтобы он был готов к использованию:
Использование
$(selector).getCaret()
возвращает смещение числа и$(selector).setCaret(num)
устанавливает смещение и устанавливает фокус на элемент.Также небольшой совет: если вы запустите
$(selector).setCaret(num)
консоль, он вернет console.log, но вы не будете визуализировать фокус, поскольку он установлен в окне консоли.Bests; D
источник
Вы можете напрямую изменить прототип, если setSelectionRange не существует.
ссылка jsFiddle
источник