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


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

Estoy usando jQuery para implementar el historial de comandos cuando el usuario golpea 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 es:

$(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 la 'entrada' después del enfoque?


75
2018-06-29 02:39


origen


Respuestas:


Parece que se borra el valor después de enfocar y luego restablecer los trabajos.

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

124
2017-12-25 22:30



Parece un poco extraño, incluso tonto, pero esto funciona para mí:

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

Ahora, no estoy seguro de haber replicado tu configuración. Estoy asumiendo input es un <input> elemento.

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


51
2018-06-29 03:08



Espero que esto te ayude:

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

19
2018-04-24 06:26



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

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

Adición: Si entrada el elemento se agregó a DOM utilizando JQuery, un foco no está configurado en IE. Usé un pequeño truco:

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

7
2017-07-14 09:11



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

Usa setSelectionRange si es compatible, de lo contrario tiene un sólido respaldo.

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

input.putCursorAtEnd();

7
2018-02-21 04:47



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

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

Esta línea funciona para mí.


7
2017-11-05 16:13



Sé que esta respuesta llega tarde, pero puedo ver que la gente no ha encontrado una respuesta. Para evitar que la tecla hacia arriba coloque el cursor al inicio, solo return false del método que maneja el evento. Esto detiene la cadena de eventos que conduce al movimiento del cursor. Pegando el código revisado del PO 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

5
2017-09-09 12:02



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

5
2018-03-29 11:47



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

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

Probado y encontrado trabajando en:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

5
2017-09-19 06:28



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 están en estos artículos aquí en SitePoint, AspAlliance.


4
2018-06-29 03:07



como otro dicho, claro y relleno funcionó para mí:

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

3
2018-05-23 02:45