[解決済み】htmlのテキストボックスでキーボードのキャレット位置を設定する

質問

テキストボックスのキーボードキャレットを特定の位置に移動させる方法をご存知の方はいらっしゃいますか？

例えば、テキストボックス（例：input要素、text-areaではない）に50文字入っていて、キャレットを20文字の前に配置したい場合、どうすればいいでしょうか？

この質問との差別化で。 jQuery テキストエリアでのカーソル位置の設定 のように、jQueryが必要です。

解決するには？

Josh Stodolaの記事より抜粋。 JavascriptでテキストボックスやTextAreaのキーボードキャレット位置を設定する

テキストボックスやテキストエリアの好きな位置にキャレットを挿入できるようにする汎用関数です。

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

期待される最初のパラメータは、キーボードキャレットを挿入したい要素のIDです。もしその要素が見つからない場合は、何も起こりません（当然ですが）。2番目のパラメータは、キャレット位置のインデックスです。0を指定すると、キーボードキャレットは先頭に置かれます。要素の文字数より大きな値を渡すと、キーボードキャレットを末尾に配置します。

IE6以上、Firefox2、Opera8、Netscape9、SeaMonkey、Safariでテストしています。残念ながらSafariでは、onfocusイベントとの組み合わせで動作しません）。

上記の関数を使用して、ページ上のすべてのテキストエリアにフォーカスが当たったときに、キーボードキャレットを強制的に末尾にジャンプさせる例です。

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);