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

set cursor position javascript

Question

Tengo un área de texto y un botón en un formulario. El área de texto ya puede tener 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 posible?

Answer 1

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

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

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 jQuery rápida 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);

Use esto:

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

Answer 3

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...");

Answer 4

Para establecer el enfoque del mouse y mover el cursor al final de la entrada. Su trabajo en todos los navegadores, es simplemente lógica aquí.

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

Answer 5

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

$(''input'').caretToEnd();

Answer 6

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 para textarea . Probado con los últimos navegadores: Firefox 23, IE 11 y Chrome 28.

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

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

Answer 7

Por "la última posición", ¿te refieres al final del texto?

Cambiar el ''.value'' de un campo de formulario moverá el cursor al final en cada navegador excepto IE. Con IE, tienes que ensuciarte las manos y manipular deliberadamente la selección, usando 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 quiere decir que volvió 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 ocurrirá con solo llamar a ''element.focus ()''; el navegador recuerda el último cursor / posición de 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 bastante tediosa de ''document.selection.createRange ()''.

No estoy al tanto de nada en jQuery que te ayude a hacer esto, pero tal vez haya algún complemento en algún lugar.