¿Cómo se puede colocar el cursor en una posición determinada de un textarea?

¿Cómo puedo establecer la posición del cursor en un campo de texto mediante jQuery? Tengo un campo de tipo textarea con un determinado contenido y quiero posicionar el cursor exactamente en el carácter que indique cuando el usuario seleccione el textarea.

Si por ejemplo quiero posicionar el cursor en el cuarto carácter, el código tendría que ser algo así:

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

¿Cómo puedo definir la función setCursorPosition?

Estás leyendo una traducción autorizada de la pregunta jQuery Set Cursor Position in Text Area planteada por jcnnghm en StackOverflow.

Respuestas

Este es el código jQuery que debes utilizar:

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

Para colocar el cursor en la posición 4, ejecuta este código:

$('#elemento').selectRange(4);

Esta función además es flexible y te permite seleccionar un rango de caracteres:

$('#elemento').selectRange(3,5);

@librosweb

7 octubre 2014, 22:56