JavaScriptを使用してテキスト入力フィールドのテキストの末尾にカーソルを配置するにはどうすればよいですか?

HTML では、入力フィールドはユーザーからの入力を取得するために使用されます。場合によっては、入力で文字列または長いテキスト メッセージを取得する必要があります。このようなシナリオでは、ユーザーは入力フィールドの最後まで移動して、さらにコンテンツやメッセージを追加する必要がある場合があります。したがって、ユーザーがボタンをクリックして入力フィールドの最後に移動できるように、何かを設定する必要があります。このチュートリアルでは、JavaScript を使用して入力フィールド内のテキストの末尾にカーソルを配置する方法を学習します。

setSelectionRange() メソッドを使用する

setSelectionRange() メソッドは、入力フィールド内のテキストを選択するために使用されます。選択を開始および終了するには 2 つのパラメータが必要です。 setSelectionRange() メソッドを使用して最後の文字を選択し、テキストの最後にカーソルを置きます。

ユーザーは、次の構文に従って setSelectionRange() メソッドを使用して、テキストの末尾にカーソルを置くことができます。

上記の構文では、入力は JavaScript でアクセスする HTML 要素です。 「len」は入力値の長さです。

以下の例では、入力フィールドとボタンを作成します。ユーザーがボタンをクリックすると、moveAtend() 関数が実行されます。

JavaScript では、「名前」入力フィールドにアクセスする moveAtend() 関数を定義します。その後、 focus() メソッドを使用して入力フィールドにフォーカスを設定します。その後、入力値の長さを 2 つのパラメーターとして渡して、setSelectionRange() メソッドを使用します。出力では、ユーザーはボタンをクリックして、カーソル位置がテキストの末尾に設定されるのを確認できます。

selectionStart プロパティとselectionEnd プロパティを使用する

「selectionStart」および「selectionEnd」CSS プロパティは、入力フィールドの入力値を選択するために使用されます。 「selectionStart」は選択を開始した位置のインデックス値を取得し、「selectionEnd」はテキスト選択を終了する必要がある位置のインデックス値を取得します。

ここでは、「selectionStart」プロパティと「selectionEnd」プロパティの値をテキストの長さと等しく設定して、カーソルをテキストの末尾に配置できます。

ユーザーは、次の構文に従って「selectionStart」属性と「selectionEnd」属性を使用して、テキストの末尾にカーソルを置くことができます。

上記の構文では、input は HTML 要素であり、「len」はその値の長さです。

最初の例と同様に、以下の例でも入力フィールドを作成します。 moveAtend() 関数では、「selectionStart」プロパティと「selectionEnd」プロパティの値を「name」入力フィールドのテキスト長と等しく設定します。

入力フィールドのテキスト値の末尾にカーソルを配置する 2 つの方法を学習しました。最初のメソッドでは setSelectionRange() メソッドを使用し、2 番目のメソッドでは「selectionStart」プロパティと「selectionEnd」プロパティを使用しました。ただし、両方のメソッドはほぼ同じで、setSelectionRange() メソッドはパラメータとして「selectionStart」と「selection」の終了値を受け取ります。

以上がJavaScriptを使用してテキスト入力フィールドのテキストの末尾にカーソルを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。