プログラムでキーボード キャレットをテキスト ボックスに配置するにはどうすればよいですか?

テキストボックス内でキーボード キャレットを配置するためのテクニック

キーボード キャレットをテキストボックス内の特定の場所に移動すると、ユーザーの操作と編集が強化されます。効率。これを実現するために、さまざまな方法が利用可能です。

汎用キャレット位置決め関数

Josh Stodola の記事から抜粋した次の関数は、キャレット位置を設定するための多用途のソリューションを提供します。テキストボックスとテキストエリアの両方:

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

この関数は 2 つのパラメータを取ります:ターゲット要素と目的のキャレット位置。キャレット位置として 0 を渡すとテキストの先頭に設定され、要素の値の長さを超えると末尾に配置されます。

使用例

提供された例は、キーボード キャレットがメッセージを受け取ったときに、ページ上のすべてのテキストエリアの最後に強制的にジャンプする方法を示しています。 focus:

function setTextAreasOnFocus() {
    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);

このコードは、フォーカスを受け取るとすべてのテキストエリアの最後にキャレットを効果的に配置し、テキストの編集とフォームの入力を容易にします。

以上がプログラムでキーボード キャレットをテキスト ボックスに配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。