javascript - テキストエリアの最後にカーソルを設定するにはどうすればよいですか？

Question

textarea要素の最後にカーソルを設定する方法はありますか？Firefox 3.6を使用していますが、IEやChromeで動作する必要はありません。ここでの関連するすべての回答はonfocus()イベントを使用しているようですが、ユーザーが要素内の任意の場所をクリックすると、textareaFirefoxがカーソル位置をそこに設定するため、役に立たないようです。textarea最後の部分が表示されるように（最後に何かを追加しやすくするために）長いテキストを表示します。

フレームワークやライブラリはありません。

Answer 1

多くの方法があるかもしれません、例えば

element.focus();
element.setSelectionRange(element.value.length,element.value.length);

http://jsfiddle.net/doktormolle/GSwfW/

Answer 2

最初にjQueryソリューションを見ずにjavascriptを使用してから長い時間が経ちました...

そうは言っても、javascript を使用する最善の方法は、テキストエリアがフォーカスされたときに現在テキストエリアにある値を取得し、テキストエリアの値を取得した値に設定することです。これは常に jQuery で次のように機能します。

$('textarea').focus(function() {
    var theVal = $(this).val();
    $(this).val(theVal);
});

プレーンな JavaScript の場合:

var theArea = document.getElementByName('[textareaname]');

theArea.onFocus = function(){
    var theVal = theArea.value;
    theArea.value = theVal;
}

私は間違っているかもしれません。ちょっとさびた。

Answer 3

ここにそのための関数があります

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

[デモ] [ソース]

Answer 4

textarea.focus()
textarea.value+=' ';//adds a space at the end, scrolls it into view

Answer 5

(this.jQuery || this.Zepto).fn.focusEnd = function () {
    return this.each(function () {
        var val = this.value;
        this.focus();
        this.value = '';
        this.value = val;
    });
};