20

テキストエリアがあり、クリックするとキャレットを最後の文字に移動したいのでSomething[caret]

function moveCaret(){
     // Move caret to the last character
}

<textarea onclick="moveCaret();">
     Something
</textarea>

私が知っているように、これは TextRange オブジェクトで何とか可能ですが、それを使用する方法が本当にわかりません

編集:純粋な JavaScript ソリューションのみを見たいので、ライブラリは使用しないでください。

4

1 に答える 1

43

次の関数は、テキストエリアとテキスト入力の両方について、すべての主要なブラウザーで機能します。

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

ただし、ユーザーがマウスでキャレットを移動できないため、ユーザーがテキストエリアをクリックするたびにこれを行うべきではありません。代わりに、テキストエリアがフォーカスを受け取ったときに実行してください。Chrome にも問題があり、次のように回避できます。

完全な例: http://www.jsfiddle.net/ghAB9/3/

HTML:

<textarea id="test">Something</textarea>

脚本：

var textarea = document.getElementById("test");
textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};
于 2011-01-17T17:31:46.477 に答える