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

Question

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

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

Мой код, как есть:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

Как заставить курсор поместить курсор в конец ввода после фокуса?

Answer 1

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

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Answer 2

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

input.val(lastQuery);
input.focus().val(input.val());

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

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

Answer 3

Надеюсь, это поможет вам:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Answer 4

Как насчет одной строки ...

$('#txtSample').focus().val($('#txtSample').val());

У меня эта строка работает.

Answer 5

Крис Койер имеет для этого мини-плагин jQuery, который отлично работает: http://css -tricks.com / snippets / jquery / переместить курсор-в-конец-текста-ввода-ввода /

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

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)
      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;
      this.setSelectionRange(len, len);
    } else {
      // ... otherwise replace the contents with itself
      // (Doesn't work in Google Chrome)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

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

input.putCursorAtEnd();

Answer 6

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

var input = $('#some_elem');
input.focus().val(input.val());

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

input.blur().focus().val(input.val());

Answer 7

Ref: @ will824 Комментарий, у меня это решение работало без проблем с совместимостью. Остальные решения не удалось в IE9.

var input = $("#inputID"); 
tmp = input.val(); input.focus().val("").blur().focus().val(tmp);

Проверено и найдено работающих в:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Answer 8

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

function to_end(el) {
            var len = el.value.length || 0;
            if (len) {
                if ('setSelectionRange' in el) el.setSelectionRange(len, len);
                else if ('createTextRange' in el) {// for IE
                    var range = el.createTextRange();
                    range.moveStart('character', len);
                    range.select();
                }
            }
        }

Answer 9

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

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
      // HERE IS THE FIX:
      return false; 
// and it continues on from there

Answer 10

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

Это работает в фф:

    var t =$("#INPUT");
    var l=$("#INPUT").val().length;
    $(t).focus();

    var r = $("#INPUT").get(0).createTextRange();
    r.moveStart("character", l); 
    r.moveEnd("character", l);      
    r.select();

Подробнее в этих статьях здесь: SitePoint , AspAlliance .