HTML テキストボックス内のキーボード キャレットの位置の管理
Web 開発では、テキストボックス内のキーボード キャレットの位置を制御すると、ユーザー エクスペリエンスが向上し、作業が容易になります。シームレスなデータ入力。この記事では、前の質問で説明した jQuery ベースのアプローチと区別して、キャレットを特定の位置に移動する方法について説明します。
汎用キャレット位置決め関数
Toテキストボックスまたはテキストエリア内の任意の位置にキャレットを配置するには、次の JavaScript を利用できます。 function:
function setCaretPosition(elemId, caretPos) { var elem = document.getElementById(elemId); if(elem != null) { if(elem.createTextRange) { // IE var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { // Modern Browsers elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } }
最初のパラメータ (elemId) は HTML 要素 ID を表します。 2 番目のパラメータ (caretPos) は、開始を表す 0 で目的のキャレット位置を指定します。指定した位置が要素の値の長さを超える場合、キャレットは最後に配置されます。
使用法と例
この関数を呼び出して要素の値を配置できます。テキストボックス内の重要なポイントにキャレットを置きます。たとえば、フォーカスされているときにページ上のすべてのテキストエリアの最後にキャレットを強制的に移動するには、次のコードを使用できます。
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); } } } addLoadEvent(setTextAreasOnFocus);
この手法は、IE6、Firefox、Opera、 Netscape、SeaMonkey、Safari (onfocus イベントとの組み合わせを除く)。この機能を活用することで、Web 開発者はデータ入力手順を強化し、アプリケーションに対するユーザーの関与を最適化できます。
以上がHTML テキストボックスのキャレット位置をプログラムで制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。