¿Cómo puede mover el cursor a la última posición de un área de texto en Javascript?

Question

Tengo un área de texto y un botón en un formulario. Es posible que el área de texto ya tenga texto. Me gustaría que el cursor se mueva a la última posición en el área de texto cuando se hace clic en el botón.

¿Es esto posible?

Answer 1

Por & # 8220; la última posición & # 8221 ;, ¿te refieres al final del texto?

Cambiar el & # 8216; .value & # 8217; de un campo de formulario moverá el cursor al final en cada navegador excepto IE. Con IE, debe ensuciarse las manos y manipular deliberadamente la selección, utilizando interfaces no estándar:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

¿O quieres decir volver a colocar el cursor en el lugar donde estaba anteriormente, la última vez que se enfocó el área de texto?

En todos los navegadores, excepto IE, esto ya sucederá simplemente llamando a & # 8216; element.focus () & # 8217 ;; el navegador recuerda la última posición del cursor / selección por entrada y lo vuelve a enfocar.

Esto sería bastante complicado de reproducir en IE. Tendría que sondear todo el tiempo para verificar dónde estaba el cursor / selección, y recordar esa posición si estaba en un elemento de entrada, luego buscar la posición de un elemento dado cuando se presionó el botón y restaurarlo. Esto implica una manipulación realmente bastante tediosa de & # 8216; document.selection.createRange () & # 8217 ;.

No estoy al tanto de nada en jQuery que pueda ayudarlo a hacer esto, pero ¿puede haber algún complemento en alguna parte?

Answer 2

La respuesta de xgMz fue la mejor para mí. No necesita preocuparse por el navegador:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

Y aquí hay una extensión rápida de jQuery que escribí para hacer esto la próxima vez:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

Usar así:

$("#MyTextArea").focusToEnd();

Answer 3

También puedes hacer esto:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

Este código funciona tanto para input como textarea . Probado con los últimos navegadores: Firefox 23, IE 11 y Chrome 28.

jsFiddle disponible aquí: http://jsfiddle.net/cG9gN/1 /

Fuente: https://stackoverflow.com/a/12654402/114029

Answer 4

Puede usar este https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

Esto es lo que uso para áreas de texto dentro de mi onclick u otros eventos y parece funcionar bien para FireFox e IE 7 & amp; 8. Posiciona el cursor al final del texto en lugar del frente.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

Answer 6

Para establecer el foco del mouse y mover el cursor al final de la entrada. Funciona en todos los navegadores, es simplemente una lógica simple aquí.

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

Answer 7

Modifiqué un poco la extensión @mkaj para admitir el valor predeterminado

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");