Defina o foco do mouse e mova o cursor para o final da entrada usando jQuery

Esta pergunta foi feita em alguns formatos diferentes, mas não consigo fazer com que nenhuma das respostas funcione em meu cenário.

Estou usando o jQuery para implementar o histórico de comandos quando o usuário pressiona as setas para cima / para baixo. Quando a seta para cima é pressionada, substituo o valor de entrada pelo comando anterior e defino o foco no campo de entrada, mas quero que o cursor sempre seja posicionado no final da string de entrada.

Meu código, como é:

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

Como posso forçar o cursor a ser colocado no final da 'entrada' após o foco?

Parece que limpar o valor depois de focar e redefinir funciona.

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

Parece um pouco estranho, até bobo, mas isso está funcionando para mim:

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

Agora, não tenho certeza se repliquei sua configuração. Estou assumindo que inputé um <input>elemento.

Ao reconfigurar o valor (para ele mesmo), acho que o cursor está sendo colocado no final da entrada. Testado no Firefox 3 e MSIE7.

Espero que isso ajude você:

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

Chris Coyier tem um mini plugin jQuery para isso que funciona perfeitamente bem: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Ele usa setSelectionRange se houver suporte, caso contrário, tem um fallback sólido.

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

Então você pode apenas fazer:

input.putCursorAtEnd();

Que tal em uma única linha ...

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

Esta linha funciona para mim.

2 resposta do artlung : Funciona com a segunda linha apenas no meu código (IE7, IE8; Jquery v1.6):

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

Adição: se o elemento de entrada foi adicionado ao DOM usando JQuery, um foco não é definido no IE. Eu usei um pequeno truque:

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

Ref: @ will824 Comentário, Esta solução funcionou para mim sem problemas de compatibilidade. O resto das soluções falhou no IE9.

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

Testado e encontrado funcionando em:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Eu sei que essa resposta chega tarde, mas posso ver que as pessoas não encontraram uma resposta. Para evitar que a tecla up coloque o cursor no início, apenas a return falsepartir do método que trata do evento. Isso interrompe a cadeia de eventos que leva ao movimento do cursor. Colando o código revisado do OP abaixo:

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

Eu uso o código abaixo e funciona bem

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

Será diferente para navegadores diferentes:

Isso funciona em 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();

Mais detalhes estão nestes artigos aqui em SitePoint , AspAlliance .

como outro dito, limpar e preencher funcionou para mim:

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

defina o valor primeiro. em seguida, defina o foco. quando focar, ele usará o valor que existe no momento do foco, portanto, seu valor deve ser definido primeiro.

essa lógica funciona para mim com um aplicativo que preenche um <input>com o valor de um clicado <button>. val()é definido primeiro. entãofocus()

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

Eu encontrei a mesma coisa sugerida acima por algumas pessoas. Se você focus()primeiro, em seguida, colocar o val()na entrada, o cursor será posicionado no final do valor de entrada no Firefox, Chrome e IE. Se você colocar o val()no campo de entrada primeiro, o Firefox e o Chrome posicionarão o cursor no final, mas o IE o posicionará para frente quando você focus().

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

deve fazer o truque (sempre fez para mim de qualquer maneira).

No primeiro, você deve definir o foco no objeto de caixa de texto selecionado e, em seguida, definir o valor.

$('#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'));

funciona para todos os navegadores, por exemplo.

Aqui está outro, um liner que não reatribui o valor:

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

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

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

window.onload = pageLoad;

A resposta do scorpion9 funciona. Só para deixar mais claro, veja meu código abaixo,

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

Vai focar com o ponto do mouse

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