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

98

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 arriba / abajo. Cuando se pulsa la flecha hacia arriba, reemplazo 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?

0
148

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

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
9
  • 4
    Esta es la única solución que he podido encontrar que funciona en varios navegadores. ¡Felicitaciones a usted!
    Meshaal
    9 de mayo de 12 a las 1:16
  • 2
    Esto funciona bien con FF y Chrome, pero no en IE ... ¿Alguien sabe cómo resolver este problema en IE? 20/09/12 a las 13:35
  • 1
    Tenga en cuenta también que puede encadenar las llamadas: var temp = input.focus().val(); input.val('').val(temp);
    harpo
    22 de febrero de 2014 a las 4:40
  • 22
    Esto puede ser aún más simple: input.focus().val(input.val()); 30 de mayo de 2014 a las 18:10
  • 2
    No parece funcionar con contenteditableelementos por alguna razón, tal vez porque uno tiene que usar en .html()lugar de.val()
    jg2703
    3 de mayo de 2017 a las 15:11
56

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.

4
  • 1
    Sí, la entrada es un elemento <input>. Intenté esto y no funcionó en FF3 o Safari 4 29/06/09 a las 12:52
  • ¿Algún avance en esto? Trabajó para mi. Actualice la pregunta o agregue una respuesta si encontró una solución.
    artlung
    14 de julio de 2009 a las 22:53
  • En FF15, esto coloca el cursor al comienzo del campo de entrada. Aparte de eso, está funcionando bien. ¿Tiene también una solución para FF? 11/09/12 a las 10:49
  • @JochenJung No he mirado esto desde 2009; funcionó entonces con FF3 y jQuery. Si encuentra una solución utilizando jQuery y FF15 actuales, no dude en editar esta publicación.
    artlung
    11/09/12 a las 12:44
48

Espero que esto te ayude:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
2
  • 4
    Funciona bien, creo que esta es una mejor solución que restablecer el valor, especialmente cuando hay algún tipo de enlace de vista de modelo. 5 de septiembre de 2016 a las 12:53
  • 2
    Esta es la respuesta correcta, configurando exactamente lo que desea configurar sin perder de vista. 18/04/19 a las 13:02
14

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();
1
  • Increíble gracias, la única solución que encontré en 2020 que parece funcionar de manera confiable. 31/03/20 a las 14:32
12

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

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

Esta línea me funciona.

1
  • Gracias Mad por el comentario. 5/11/14 a las 16:52
9

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
8

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());
2
  • 1
    Esto funcionó para mí, pero tuve que hacer algo como: var input = $ ("# inputID"); tmp = input.val (); input.focus (). val (""). blur (). focus (). val (tmp);
    will824
    22/01/2013 a las 22:18
  • @ will824 su solución de comentarios funcionó para mí. Lo estoy publicando como respuesta. 19 de septiembre de 2014 a las 6:27
6

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
1
  • 1
    Puede reducir la segunda línea a var key = e.charCode || e.keyCode || 0; 4 oct 2016 a las 14:25
6

Utilizo el código a continuación 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();
                }
            }
        }
6

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 .

0
4

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

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

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 funciona para mí con una aplicación que completa 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();
});
1
  • Puedes hacerlo más simple con una línea en lugar de dos: $('input[name=item1]').val(value).focus();
    inMILD
    8 de julio de 2018 a las 4:53
2

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

2

Al principio, debe establecer el enfoque en el objeto de cuadro de texto seleccionado y, a continuación, establecer el valor.

$('#inputID').focus();
$('#inputID').val('someValue')
1
  • 1
    Intenté esto pero no funciona. ¿También te funciona con un contenido div editable configurado como verdadero? 12 de septiembre de 2013 a las 6:21
1
    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.

1

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

$("#inp").focus()[0].setSelectionRange(99999, 99999);
0
0
function CurFocus()
{
    $('.txtEmail').focus(); 
}

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

window.onload = pageLoad;
0

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>
0
  var prevInputVal = $('#input_id').val();
  $('#input_id').val('').focus().val(prevInputVal)

Store input previous value in a variable -> empty input value -> focus input -> reassign original value SIMPLE !

-4

Se enfocará con el punto del mouse

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