TEXTAREAの末尾にカーソルを置く方法は？ （jQueryを使用しないで）

Question

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

Answer 1

多くの方法があります。

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

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

Answer 2

var t = /* get textbox element */ ; 

t.onfocus = function() { 
    t.scrollTop = t.scrollHeight; 
    setTimeout(function(){ 
     t.select(); 
     t.selectionStart = t.selectionEnd; 
    }, 10); 
} 

ブラウザがフォーカスイベントを処理行われ後トリックテキスト挿入（カラット）位置を変更するためのsetTimeoutを使用しています。それ以外の場合は、スクリプトによって位置が設定され、ブラウザによってすぐに設定されます。

Answer 3

私が最初にjQueryの解決を見ないではJavaScriptを使用するので、長い時間がかかった...言われていること

は、JavaScriptを使用して、あなたの最善のアプローチは、値を取得することです現在フォーカスが合っているときにテキストエリアにあり、テキストエリアの値をグラブされた値に設定します。プレーンなJavaScriptで

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

：これはいつものようにjQueryで動作

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

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

私が間違っている可能性があります。少し錆びた。ここで

Answer 4

はその

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(); 
    } 
} 

[Demo][Source]

Answer 5

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

Answer 6

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