Jak przenieść kursor na ostatnią pozycję w polu tekstowym w JavaScript?

Question

Mam textarea i przycisk na formularzu. W textarea może już znajdować się tekst. Chciałbym, aby kursor przesunął się do ostatniej pozycji w obszarze tekstowym po kliknięciu przycisku.

Czy to możliwe?

Answer 1

Przez "ostatnią pozycję" rozumiesz koniec tekstu?

Zmiana ".value" pola formularza przeniesie kursor do końca w każdej przeglądarce z wyjątkiem IE. Z IE trzeba dostać w swoje ręce brudne i świadomie manipulować wybór, stosując niestandardowe interfejsy:

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

Czy chodziło Ci umieścić kursor z powrotem do miejsca, to było poprzednio, po raz ostatni textarea było koncentruje się?

We wszystkich przeglądarkach z wyjątkiem IE nastąpi to po prostu przez wywołanie "element.focus()"; przeglądarka zapamiętuje ostatnią pozycję kursora/selekcji na dane wejście i ponownie ją ustawia.

Byłoby to dość trudne do odtworzenia w IE. Musiałbyś cały czas sondować, aby sprawdzić gdzie był kursor/wybór, i zapamiętać tę pozycję, jeśli był w elemencie wejściowym, a następnie pobrać pozycję dla danego elementu, gdy przycisk został naciśnięty i przywrócić go. Obejmuje to naprawdę bardzo żmudną manipulację "document.selection.createRange()".

Nie jestem świadomy czegokolwiek w jQuery, które pomogłoby ci to zrobić, ale może gdzieś jest wtyczka?

Answer 2

Odpowiedź xgMz była dla mnie najlepsza. Nie trzeba się martwić o przeglądarce:

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

A oto szybkie rozszerzenie jQuery pisałem to zrobić dla mnie następnym razem:

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

Zastosowanie takiego:

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

Answer 3

To jest to, czego używam dla textareas wewnątrz moich zdarzeń onclick lub innych zdarzeń i wydaje się działać dobrze dla FireFox i IE 7 & 8. Ustawia kursor na końcu tekstu zamiast z przodu.

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

Answer 4

Aby ustawić ostrość i przesunąć kursor na koniec wprowadzania. Jego działanie w każdej przeglądarce, to po prostu prosta logika tutaj.

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

Answer 5

Można użyć tego https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd(); 

Answer 6

Można też to zrobić:

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

    var elemLen = el.value.length; 

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

    el.focus(); 
});​ 

Ten kod działa dla obu input i textarea. Testowane w najnowszych przeglądarkach: Firefox 23, IE 11 i Chrome 28.

jsFiddle dostępny tutaj: http://jsfiddle.net/cG9gN/1/

Źródło: https://stackoverflow.com/a/12654402/114029

Answer 7

I zmodyfikowane @mkaj rozszerzenie trochę wspieranie wartości domyślnej

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