Establezca el enfoque del mouse y mueva el cursor al final de la entrada usando jQuery

Esta pregunta se ha formulado en algunos formatos diferentes, pero no puedo obtener ninguna de las respuestas para que funcione en mi escenario.

Estoy usando jQuery para implementar el historial de comandos cuando el usuario pulsa las flechas hacia arriba / abajo. Cuando se pulsa la flecha hacia arriba, sustituyo el valor de entrada con el comando anterior y establezco el foco en el campo de entrada, pero quiero que el cursor siempre esté posicionado al final de la cadena de entrada.

Mi código, como está:

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

¿Cómo puedo forzar que el cursor se coloque al final de 'entrada' después del enfoque?

Parece que borrar el valor después de enfocar y luego reiniciar funciona.

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

Parece un poco extraño, incluso tonto, pero esto me funciona:

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

Ahora, no estoy seguro de haber replicado su configuración. Supongo que inputes un <input>elemento.

Al restablecer el valor (a sí mismo), creo que el cursor se coloca al final de la entrada. Probado en Firefox 3 y MSIE7.

Espero que esto te ayude:

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

Chris Coyier tiene un mini complemento jQuery para esto que funciona perfectamente bien: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Utiliza setSelectionRange si es compatible, de lo contrario, tiene un respaldo 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;
  });
};

Entonces puedes simplemente hacer:

input.putCursorAtEnd();

¿Qué pasa en una sola línea ...

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

Esta línea me funciona.

2 respuesta de artlung : Funciona con la segunda línea solo en mi código (IE7, IE8; Jquery v1.6):

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

Además: si el elemento de entrada se agregó a DOM usando JQuery, no se establece un foco en IE. Usé un pequeño truco:

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

Ref: @ will824 Comentario, Esta solución funcionó para mí sin problemas de compatibilidad. El resto de soluciones fallaron en IE9.

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

Probado y encontrado funcionando en:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Sé que esta respuesta llega tarde, pero puedo ver que la gente no ha encontrado una respuesta. Para evitar que la tecla arriba coloque el cursor al principio, solo return falsedesde el método que maneja el evento. Esto detiene la cadena de eventos que conduce al movimiento del cursor. Pegar el código revisado del OP a continuación:

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

Utilizo el siguiente código y funciona bien

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 diferentes navegadores:

Esto funciona en 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();

Más detalles se encuentran en estos artículos aquí en SitePoint , AspAlliance .

como otros dijeron, claro y relleno funcionó para mí:

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

establezca el valor primero. luego establezca el enfoque. cuando se enfoca, usará el valor que existe en el momento del enfoque, por lo que su valor debe establecerse primero.

esta lógica me funciona con una aplicación que rellena un <input>con el valor de un clic <button>. val()se establece primero. luegofocus()

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

He encontrado lo mismo que algunas personas sugirieron anteriormente. Si focus()primero, luego empuja el val()en la entrada, el cursor se colocará al final del valor de entrada en Firefox, Chrome e IE. Si presiona val()primero en el campo de entrada, Firefox y Chrome colocan el cursor al final, pero IE lo coloca al frente cuando usted focus().

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

debería hacer el truco (siempre lo ha hecho para mí de todos modos).

Al principio, debe establecer el foco en el objeto de cuadro de texto seleccionado y luego establecer el 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 los navegadores, es decir.

Aquí hay otro, un trazador de líneas que no reasigna el valor:

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

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

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

window.onload = pageLoad;

La respuesta de scorpion9 funciona. Solo para que quede más claro, vea mi código a continuación,

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

Se enfocará con el mouse

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