Встановіть фокус миші та перемістіть курсор до кінця введення за допомогою 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

Як я можу змусити курсор розмістити в кінці "введення" після фокусування?

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

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

Це виглядає трохи дивно, навіть безглуздо, але це працює для мене:

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

Зараз я не впевнений, що повторив ваші налаштування. Я припускаю input, що це <input>елемент.

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

Сподіваюся, це допоможе вам:

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

Кріс Койєр має для цього міні-плагін 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();

Що в одному рядку ...

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

Цей рядок працює для мене.

Відповідь 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());

Посилання: @ 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

Я знаю, що ця відповідь приходить пізно, але я бачу, що люди не знайшли відповіді. Щоб запобігти клавіші вгору, кладіть курсор на початок, просто 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

Я використовую код нижче, і він чудово працює

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

Для різних браузерів це буде по-різному:

Це працює у 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 .

як і інші сказані, очищення та заповнення працювали для мене:

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

спочатку встановіть значення. потім встановіть фокус. коли він фокусується, він буде використовувати значення, яке існує на момент фокусування, тому ваше значення має бути встановлене першим.

ця логіка працює для мене з додатком, який заповнює значення <input>зі значенням клацання <button>. val()встановлюється першим. тодіfocus()

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

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

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

повинен зробити трюк (у мене так чи інакше завжди).

Спочатку потрібно встановити фокус на виділений об’єкт текстового поля, а потім встановити значення.

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

    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'));

працює для всіх браузерів, тобто ..

Ось ще один, один вкладиш, який не переназначає значення:

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

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

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

window.onload = pageLoad;

Відповідь від скорпіона9 працює. Щоб зробити це більш зрозумілим, дивіться мій код нижче,

<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>

Він сфокусується на точці миші

$ ("# TextBox"). Focus ();