Come si può spostare il cursore sull'ultima posizione di un'area di testo in Javascript?

Question

Ho un textarea e un pulsante su un modulo. La textarea potrebbe già contenere del testo. Vorrei che il cursore si spostasse sull'ultima posizione nell'area di testo quando si fa clic sul pulsante.

È possibile?

Answer 1

Per "l'ultima posizione", intendi la fine del testo?

La modifica del ".valore" di un campo modulo sposta il cursore alla fine in ogni browser tranne IE. Con IE devi sporcarti le mani e manipolare deliberatamente la selezione, usando interfacce non standard:

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

Oppure intendi riportare il cursore sul punto in cui si trovava in precedenza, l'ultima volta che l'area di testo è stata focalizzata?

In tutti i browser tranne IE, ciò avverrà già solo chiamando "element.focus ()"; il browser ricorda l'ultima posizione del cursore / selezione per input e lo mette nuovamente a fuoco.

Sarebbe piuttosto difficile riprodurlo in IE. Dovresti sempre eseguire il polling per verificare dove si trovava il cursore / selezione e ricordare quella posizione se si trovava in un elemento di input, quindi recuperare la posizione per un dato elemento quando il pulsante veniva premuto e ripristinarlo. Ciò comporta una manipolazione davvero abbastanza noiosa di "document.selection.createRange ()".

Non sono a conoscenza di nulla in jQuery che possa aiutarti a farlo, ma forse potrebbe esserci un plugin da qualche parte?

Answer 2

La risposta di xgMz è stata la migliore per me. Non devi preoccuparti del browser:

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

Ed ecco una rapida estensione jQuery che ho scritto per farlo per me la prossima volta:

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

Usa in questo modo:

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

Answer 3

Puoi anche farlo:

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

    var elemLen = el.value.length;

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

    el.focus();
});​

Questo codice funziona sia per input che textarea . Testato con i browser più recenti: Firefox 23, IE 11 e Chrome 28.

jsFiddle disponibile qui: http://jsfiddle.net/cG9gN/1 /

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

Answer 4

Puoi utilizzare questo https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

Questo è quello che uso per textareas all'interno del mio onclick o di altri eventi e sembra funzionare bene per FireFox e IE 7 & amp; 8. Posiziona il cursore alla fine del testo anziché in primo piano.

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

Answer 6

Per impostare la messa a fuoco del mouse e spostare il cursore alla fine dell'input. Funziona in tutti i browser, è semplicemente una logica semplice qui.

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

Answer 7

Ho modificato leggermente l'estensione @mkaj per supportare il valore predefinito

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