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


94

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?

Respuestas:


143

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

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

4
Esta es la única solución que he podido encontrar que funciona en varios navegadores. ¡Felicitaciones a usted!
Meshaal

2
Esto funciona bien con FF y Chrome pero no en IE ... ¿Alguien sabe cómo resolver este problema en IE?
John Smith

1
Tenga en cuenta también que puede encadenar las llamadas:var temp = input.focus().val(); input.val('').val(temp);
harpo

20
Esto puede ser aún más simple:input.focus().val(input.val());
Fateh Khalsa

2
No parece funcionar con contenteditableelementos por alguna razón, tal vez porque uno tiene que usar en .html()lugar de.val()
jg2703

55

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.


1
Sí, la entrada es un elemento <input>.
Probé

¿Algún avance en esto? Trabajó para mi. Actualice la pregunta o agregue una respuesta si encontró una solución.
artlung

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

@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

44

Espero que esto te ayude:

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

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.
morten.c

2
Esta es la respuesta correcta, estableciendo exactamente lo que desea configurar sin perder de vista.
Dan Barron

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

Increíble gracias, la única solución que encontré en 2020 que parece funcionar de manera confiable.
AdamJones

12

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

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

Esta línea me funciona.


Mad gracias por el comentario
Chris Rosete

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

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

@ will824 su solución de comentarios funcionó para mí. Lo estoy publicando como respuesta.
Aamir Shahzad

8

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

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
Puede reducir la segunda línea avar key = e.charCode || e.keyCode || 0;
Gone Coding

6

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

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 .


3

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

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

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

Puede hacerlo más simple con una línea en lugar de dos:$('input[name=item1]').val(value).focus();
inMILD

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 foco en el objeto de cuadro de texto seleccionado y luego establecer el valor.

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

1
Intenté esto pero no funciona. ¿También te funciona con un contenido div editable configurado como verdadero?
Rupam Datta

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.