350 votos

jQuery Set Cursor Position in Text Area

¿Cómo se establece la posición del cursor en un campo de texto usando jQuery? Tengo un campo de texto con contenido, y quiero que el cursor del usuario se posicione en un cierto desplazamiento cuando se enfoca en el campo. El código debería tener un aspecto parecido a este:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

¿Cómo sería la implementación de esa función de SetCursorPosition? Si tuviera un campo de texto con el contenido abcdefg, esta llamada daría lugar a que el cursor se posicionara de la siguiente manera: abcd* | *efg.

Java tiene una función similar, setCaretPosition. ¿Existe un método similar para javascript?

Actualización: Modifiqué el código del CMS para que funcione con jQuery de la siguiente manera:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

259voto

Mark Puntos 49079

Aquí hay una solución de jQuery:

$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Con esto, puedes hacer

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

Ejemplo de JsFiddle

188voto

CMS Puntos 315406

Tengo dos funciones:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

Entonces puedes usar setCaretToPos así:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

34voto

HRJ Puntos 4750

Las soluciones aquí son correctas excepto por el código de extensión jQuery.

La función de extensión debe iterar sobre cada elemento seleccionado y devolver this para soportar el encadenamiento. Aquí está el a la versión correcta:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

17voto

AVProgrammer Puntos 626

Encontré una solución que funciona para mí:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

Ahora puedes mover el foco al final de cualquier elemento llamando:

$(element).focusEnd();

4voto

Ben Noland Puntos 10060

Estoy usando esto: http://plugins.jquery.com/project/jCaret

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X