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

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

Я использую 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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Эта строка работает для меня.

Ответ 5

У Chris Coyier есть мини-jQuery-плагин для этого, который отлично работает: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Он использует 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();

Ответ 6

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

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

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

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

Ответ 7

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

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

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

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Ответ 8

Я знаю, что этот ответ приходит поздно, но я вижу, что люди не нашли ответа. Чтобы предотвратить нажатие клавиши "вверх", чтобы поставить курсор в начале, просто 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

Ответ 9

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

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

Ответ 10

В разных браузерах он будет другим:

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

    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.

Ответ 11

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

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

Ответ 12

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

$('element_identifier').focus().val('some_value')

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

Ответ 13

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

$('#inputID').focus();
$('#inputID').val('someValue')

Ответ 14

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

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

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

Ответ 15

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

$("#inp").focus()[0].setSelectionRange(99999, 99999);

Ответ 16

    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && inputField.value.length != 0){
            if (inputField.createTextRange){
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }else if (inputField.selectionStart || inputField.selectionStart == '0') {
                var elemLen = inputField.value.length;
                inputField.selectionStart = elemLen;
                inputField.selectionEnd = elemLen;
                inputField.focus();
            }
        }else{
            inputField.focus();
        }
    }

$('#urlCompany').focus(focusCampo('urlCompany'));

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

Ответ 17

function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

Ответ 18

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

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>