js は、例を共有するためにカーソルを入力ボックスの指定された位置に配置します

使いやすいユーザー インターフェイスを提供する場合、多くの場合、入力ボックスの指定された位置にカーソルを配置する必要があります。通常は末尾で、ユーザーが情報を入力し続けることができます。これを実現するには、javascriptoperationdomを使用できます。実装メソッドは次のとおりです

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart('character', position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart('character',position);  
      range.select();  
}

//

onfocus="positionCursor( this ,this.length)"

ここで、createTextRangeは要素のTextRangeオブジェクト

を作成します

次の表は、TextRange オブジェクトのプロパティとメソッドをリストしたものです。また、w3cmethod
description のドキュメントを参照することもできます。 エンドポイントを比較する : Compare
TextRange オブジェクトの終点と他の範囲の終点。 duplicate :
TextRange のコピーを返します。 execCommand : 現在のドキュメント、現在の選択範囲、または指定された範囲に対してコマンドを実行します。
expand : 指定された単位の範囲を完全に含むように範囲を拡張します。
findText : テキスト内のテキストを検索し、検索文字列を囲む範囲の開始点と終了点を設定します。
getBookmark:
moveToBookmark が同じ範囲を返す (白い文字列)を行うために使用できるブックマークを取得します。 getBoundingClientRect: 指定された
TextRectangle オブジェクト コレクションにバインドされたオブジェクトを取得します。 getClientRects: オブジェクトのコンテンツまたはクライアント領域内のレイアウトを記述する四角形のコレクションを取得します。各長方形は直線を表します。
inRange : 範囲が別の範囲に含まれるかどうかを返します。
isEqual : 指定された範囲が現在の範囲と等しいかどうかを返します。
move : 指定されたテキスト範囲を折りたたみ、空の範囲を指定された単位数だけ移動します。
moveEnd: 範囲の終了位置を変更します。
moveStart : 範囲の開始位置を変更します。
moveToBookmark: ブックマークに移動します。
moveToElementText: テキスト範囲を移動して、範囲の開始位置と終了位置に指定された要素のテキストが完全に含まれるようにします。
moveToPoint : テキスト範囲の開始位置と終了位置を指定された点に移動します。
parentElement : 指定されたテキスト範囲の親要素を取得します。
pasteHTML : HTML テキストを指定されたテキスト範囲に貼り付け、範囲内の以前のテキストと HTML 要素を置き換えます。
queryCommandEnabled: 指定されたドキュメントの現在の状態で指定されたコマンドを使用できるかどうかを示すブール値を返します。 execCommand コマンドは正常に実行されました。
queryCommandIndeterm : 指定されたコマンドがあいまいな状態にあるかどうかを示す ブール値 値を返します。
queryCommandState : コマンドの現在の状態を示す ブール値 値を返します。
queryCommandSupported: 現在のコマンドが現在のロケールでサポートされているかどうかを示す ブール値 値を返します。
queryCommandValue: 指定されたコマンドのドキュメント、範囲、または現在の選択範囲の現在の値を返します。
scrollIntoView: オブジェクトを表示範囲にスクロールし、ウィンドウの上部または下部に配置します。
select : 現在の選択領域を現在のオブジェクトとして設定します。
setEndPoint: 他の範囲の終点に基づいて範囲の終点を設定します。

プロパティ説明
boundingHeight: TextRangeオブジェクトにバインドされている四角形の高さを取得します。 boundingLeft
: バインドされた TextRange オブジェクトの長方形の左端と、それを含む TextRange オブジェクトの左側との間の距離を取得します。 boundingTop
: バインドされた TextRange オブジェクトの上端と、それを含む TextRange オブジェクトの上端との間の距離を取得します。 boundingWidth
：TextRange オブジェクトの境界を示す四角形の幅を取得します。htmlText
：TextRange オブジェクトの境界を示す四角形の幅を取得します。 offsetLeft : offsetParent
属性で指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの左位置を取得します。 offsetTop : offsetTop
属性で指定されたレイアウトまたは親座標を基準にして計算されたオブジェクトの上部の位置を取得します。 text : 範囲に含まれるテキストを設定または取得します。
関連する推奨事項:

入力ボックスのカーソル サイズ表示が一貫していない問題を解決する方法

CSS を使用して入力カーソル メソッドを非表示にする

JavaScript カスタム テキスト ボックスのカーソル コードの詳細

以上がjs は、例を共有するためにカーソルを入力ボックスの指定された位置に配置しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。