JSでカーソルを削除した後、入力ボックスの内容を自動的に前に移動させるにはどうすればよいですか?

Web アプリケーションを開発するとき、入力ボックスの内容を操作する必要があるシナリオに遭遇することがよくあります。その中で、カーソルを削除した後に入力ボックス内のコンテンツを自動的に前方に移動することは、一般的ですが難しい要件でもあります。

この記事では、この要件を達成するための 2 つの方法を紹介します。1 つは JavaScript のセレクション API を使用してテキスト操作を実行する方法、もう 1 つは入力ボックスのコンテンツを入力ボックスに自動的にリダイレクトする方法です。キーボード イベントをシミュレートします。次に進みます。

テキスト操作にセレクション API を使用する

セレクション API は、JavaScript によって提供されるテキスト操作 API であり、ドキュメントの選択されたテキスト部分を取得および操作するために使用できます。このメソッドでは、Selection API を使用してテキスト コンテンツの削除とコピーを実装します。

まず、入力ボックスの DOM ノードを取得し、それに keydown イベント リスナーをバインドして、キーボード イベントをリッスンする必要があります。ユーザーが Backspace キーまたは Delete キーを押すと、次の操作が実行されます。

1. document.getSelection() メソッドを使用して、現在選択されているテキストを取得します。
2. If 選択されたテキストが空の場合、カーソルの前の文字を削除し、modify() メソッドを使用して選択範囲を「拡張」(つまり、現在のカーソル位置と前の文字の位置の間のテキスト) にリセットすることを表します。このメソッドは、選択範囲を「移動」にリセットします (つまり、カーソルの前の文字を削除します)
3. それ以外の場合は、ユーザーが一部を選択したことを意味します。テキストを削除し、選択したテキストをクリップボードにコピーし、選択範囲を「移動」に設定して選択したテキストを削除します。
4. 最後に、入力ボックスの値を更新し、カーソルを正しい位置に移動します

これは完全な実装です:

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

シミュレートされたキーボード イベントを使用して実装する

2 番目の実装方法は、キーボード イベントをシミュレートすることによって入力ボックスのキーダウン イベントをトリガーすることです。 、自動的に前進できるようになります。このメソッドは、Selection API を使用する必要がなく、すべてのブラウザで機能します。

まず、ユーザーが Backspace キーまたは Delete キーを押すことをシミュレートするシミュレートされたキーボード イベントを作成する必要があります。次に、入力ボックスで keydown イベントをトリガーし、イベント リスナーで次の操作を実行します:

1. selectionStart プロパティとselectionEnd プロパティを使用して、現在選択されているテキスト範囲を取得します。テキストが選択されていない場合は、選択します。 selectionStart とselectionEnd.Equality
2. ユーザーが押したキーが Backspace か Delete かを決定します。Backspace の場合は、selectionStart を 1 減らし、そうでない場合は、selectionEnd を 1 増やします。
3. の値を更新します。入力ボックスと現在のカーソルに基づく位置のリセットselectionStart とselectionEnd

実装コードは次のとおりです:

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Summary

この記事では、実装する 2 つのメソッドを紹介します。 JavaScriptでカーソルを削除し、入力ボックスを表示させると内容が自動的に進みます。最初の方法は JavaScript のセレクション API を使用してテキスト操作を実行し、2 番目の方法はキーボード イベントをシミュレートすることによって実装されます。どちらの方法にも独自の長所と短所があるため、実際のニーズとブラウザの互換性に応じて選択してください。

以上がJSでカーソルを削除した後、入力ボックスの内容を自動的に前に移動させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。