Меню Рубрики

Установка курсора в начало input

Установите фокус мыши и переместите курсор в конец ввода с помощью jQuery

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

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

Как я могу заставить курсор быть помещенным в конец ‘input’ после фокусировки?

18 Ответов

Похоже, что очистка значения после фокусировки и последующего сброса работает.

Это выглядит немного странно, даже глупо, но это работает на меня:

Теперь я не уверен, что повторил вашу установку. Я предполагаю, что input — это элемент .

Переустанавливая значение (на себя), я думаю, что курсор будет помещен в конец входного сигнала. Испытано в Firefox 3 и MSIE7.

А как насчет одной-единственной строчки.

Эта линия работает на меня.

2 Ответ артлунга: Он работает со второй строкой только в моем коде (IE7, IE8; Jquery v1.6):

Добавление: если входной элемент был добавлен в DOM с помощью JQuery, фокус не будет установлен в IE. Я использовал маленький трюк:

Он использует setSelectionRange если поддерживается, то есть твердый вариант.

Тогда вы можете просто сделать:

Я знаю, что этот ответ приходит поздно, но я вижу, что люди не нашли ответа. Чтобы не дать клавише up поставить курсор в начало, просто return false из метода обработки события. Это останавливает цепочку событий, которая приводит к перемещению курсора. Вставка пересмотренного кода из OP ниже:

Я использую код ниже, и он отлично работает

Ref: @will824 комментарий, Это решение работало для меня без проблем совместимости. Rest решений не удалось в IE9.

Протестировано и работает в:

Он будет отличаться для разных браузеров:

Более подробная информация находится в этих статьях здесь на SitePoint , AspAlliance .

как и другие говорили, ясность и наполнение работали на меня:

Я нашел то же самое, что было предложено выше несколькими людьми. Если вы сначала нажмете focus() , а затем нажмете val() на вход, курсор будет расположен в конце входного значения в Firefox, Chrome и IE. Если вы сначала задвинете val() в поле ввода, то Firefox и Chrome установят курсор в конце, но IE установит его спереди, когда вы focus() .

должен сделать трюк (это всегда было для меня так или иначе).

Сначала вы должны установить фокус на выбранном объекте textbox, а затем установить значение.

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

Читайте также:  Установка гистерезиса по току что это

эта логика работает для меня с приложением, которое заполняет значением нажатой . val() устанавливается первым. тогда focus()

Вот еще один, один лайнер, который не переназначает значение:

работает для всех браузеров ie..

Ответ от scorpion9 работает. Просто чтобы сделать это более понятным смотрите мой код ниже,

Похожие вопросы:

Я получаю это действительно странное поведение.. Вот упрощенная версия моего кода: DOWN = 40; UP = 38; $(document).on(keydown, #text_input, function(e) < if (e.keyCode == DOWN) < $(#list).focus(); >.

У меня есть div с атрибутом contenteditable , и я хочу так сократить содержимое, которое вводится и длиннее, чем, например, 5 символов. Но фокус установлен на начало ввода все время. var maxlength.

Я использую плагин jQuery masked input, и когда я беру фокус поля и возвращаю фокус (размытие, фокус) курсора обратно в начало, нужно всегда оставлять курсор в конце, но я не могу.

вопрос : Когда определенный textbox получает фокус, установите курсор в конец textbox. Решение должно работать с IE7, Opera, Chrome и Firefox. Чтобы сделать вещи немного проще, это поведение.

У меня есть повязка из-за повреждения 5-й пястной кости. Печатать вообще не проблема, я делаю это часами, и это нормально. С помощью мыши. невозможно. Речь идет не о том, чтобы быть продуктивным.

У меня есть несколько элементов a в contenteditable div . Как я могу поместить курсор клавиатуры в конец определенного элемента, идентифицированного идентификатором, а затем переместить его в конец.

Я пытаюсь использовать jQuery, чтобы в основном заменить курсор в конце текста в textbox AFTER пользователь нажимает enter У меня работает часть enter — но я понятия не имею, как [после ввода части].

У меня есть следующая функция, которая добавляет селектор к входу поиска в качестве расширенного параметра, так же как стек переполняет расширенный поиск. При нажатии на то, что вы ищете, он.

NSTextField не работает, как ожидалось в моем случае. Что у меня есть, так это: элемент управления NSTextField в представлении, отображаемом в окне, которое не является главным окном приложения. это.

источник

Использовать JavaScript для размещения курсора в конце текста в текстовом элементе ввода

Каков наилучший способ (и я предполагаю самый простой способ) поместить курсор в конец текста во входном текстовом элементе через JavaScript — после того, как фокус установлен на элемент?

Я столкнулся с этой же проблемой (после настройки фокуса через RJS/prototype) в IE. Firefox уже оставил курсор в конце, когда уже есть значение для поля. IE заставлял курсор в начале текста.

Читайте также:  Установка dll драйвера win xp

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

Это работает как в IE7, так и в FF3

Там есть простой способ заставить его работать в большинстве браузеров.

Однако, из-за * причуд нескольких браузеров, более инклюзивный ответ больше похож на этот

Использование jQuery (для установки слушателя, но в противном случае это не требуется)

Использование Vanilla JS (заимствование addEvent функции из этого ответа)

Причуды

У Chrome есть странная причуда, когда событие фокусировки срабатывает перед перемещением курсора в поле; который закручивает мое простое решение. Два варианта исправить это:

  • Вы можете добавить тайм-аут 0 мс (в отложить операцию до тех пор, пока стек не станет прозрачным)
  • Вы можете изменить событие от focus до mouseup . Это было бы очень неприятно для пользователя, если вы все еще не отслеживаете фокус. Я не очень люблю этот вариант.

Кроме того, @vladkras отметил, что некоторые более старые версии Opera неправильно вычисляют длину, когда у нее есть пробелы. Для этого вы можете использовать огромное количество, которое должно быть больше, чем ваша строка.

Попробуй, это сработало для меня:

Чтобы курсор перемещался до конца, вход должен быть сфокусирован первым, а затем, когда значение будет изменено, оно закончится. Если вы установите значение в том же, оно не изменится в chrome.

После небольшого взлома с этим я нашел лучший способ использовать функцию setSelectionRange , если браузер поддерживает ее; если нет, вернитесь к использованию метода в ответе Майка Берроу (т.е. замените значение самим).

Я также устанавливаю scrollTop на большое значение, если мы находимся в вертикально-прокручиваемом textarea . (Использование произвольного высокого значения кажется более надежным, чем $(this).height() в Firefox и Chrome.)

Я сделал это как плагин jQuery. (Если вы не используете jQuery, я надеюсь, что вы все равно сможете получить его достаточно.)

Я тестировал в IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.

Он доступен на jquery.com как PutCursorAtEnd плагин. Для вашего удобства, код для версии 1.0 выглядит следующим образом:

Эта функция работает для меня в IE9, Firefox 6.x и Opera 11.x

Я пробовал следующее с довольно большим успехом в хроме

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

Затем он ждет 1 миллисекунду и снова ставит старое значение.

Simple. При редактировании или изменении значений сначала установите фокус, затем установите значение.

Читайте также:  Установка гидроусилителя от тойоты на уаз

Тем не менее требуется промежуточная переменная (см. var val =) иначе курсор ведет себя странно, нам это нужно в конце.

Для всех браузеров для всех случаев:

Требуется таймаут, если вам нужно переместить курсор из обработчика события onFocus

Эта проблема интересна. Самое запутанное в этом заключается в том, что никакое решение, которое я нашел, не решило проблему полностью.

Вам нужна функция JS, например:

Вам нужно позвонить этому парню в onfocus и onclick события.

ЭТО РАБОТАЕТ НА ВСЕХ УСТРОЙСТВАХ БРАУЗЕРОВ.

Взятие некоторых ответов.. создание однострочного jquery.

Если для поля ввода просто требуется статическое значение по умолчанию, я обычно делаю это с помощью jQuery:

Это похоже на работу во всех браузерах.

Я только что обнаружил, что в iOS параметр textarea.textContent будет помещать курсор в конец текста в элементе textarea каждый раз. Поведение было ошибкой в ​​моем приложении, но, похоже, это то, что вы могли бы использовать намеренно.

Хотя это может быть старый вопрос с большим количеством ответов, я столкнулся с подобной проблемой, и ни один из ответов не был тем, что я хотел и/или плохо объяснил. Проблема с параметрами selectionStart и selectionEnd заключается в том, что они не существуют для номера типа ввода (в то время как вопрос был задан для типа текста, я полагаю, это может помочь другим, у кого могут быть другие типы ввода, которые им необходимо сосредоточить). Поэтому, если вы не знаете, будет ли тип ввода, который будет фокусироваться функцией, это номер типа или нет, вы не можете использовать это решение.

Решение, которое работает с перекрестным браузером и для всех типов ввода, довольно просто:

  • получить и сохранить значение ввода в переменной
  • фокус ввода
  • установите значение ввода в сохраненное значение

Таким образом, курсор находится в конце входного элемента.
Таким образом, все, что вы делаете, это что-то вроде этого (с использованием jquery, если элемент селектора элементов, который вы хотите сфокусировать, доступен с помощью атрибута данных «data-focus-element» элемента с щелчком, и функция выполняется после нажатия кнопки «.foo» ) элемент):

Почему это работает? Просто, когда вызывается .focus(), фокус будет добавлен в начало входного элемента (что является основной проблемой здесь), игнорируя тот факт, что элемент ввода уже имеет в нем значение. Однако, когда значение ввода изменяется, курсор автоматически помещается в конец значения внутри входного элемента. Поэтому, если вы переопределите значение с тем же значением, которое ранее было введено во вход, значение будет выглядеть нетронутым, курсор, однако, переместится в конец.

источник

Добавить комментарий