JavaScript でテキストボックスから選択したテキストをキャプチャする方法: 包括的なソリューション

JavaScript でテキストボックスからテキスト選択をキャプチャする方法

多くの JavaScript 開発者は、テキストボックス コントロールから選択されたテキストを取得しようとするときに課題に遭遇します。 。この記事では、包括的な分析と実用的な解決策によってこの問題に対処します。

最新のブラウザで選択したテキストをキャプチャする:

HTML5 選択 API をサポートする最新のブラウザの場合、次のコード スニペットを使用できます:

<code class="javascript">function ShowSelection() {
  const textArea = document.getElementById('textbox');
  const selection = textArea.selectionStart !== undefined
    ? textArea.value.substring(textArea.selectionStart, textArea.selectionEnd)
    : '';
  alert(`You selected: ${selection}`);
}</code>

Internet Explorer の選択されたテキストのキャプチャ:

Internet Explorer では別のアプローチが必要です。このブラウザの次のコード:

<code class="javascript">if (document.selection !== undefined) {
  textArea.focus();
  const sel = document.selection.createRange();
  const selection = sel.text;
  alert(`You selected: ${selection}`);
}</code>

ボタンのクリック時に選択を維持する:

ボタンがクリックされたときに選択がクリアされないようにするには、フォーカスをテキストボックスに戻りました。これは、onkeydown イベントを処理することで実現できます:

<code class="javascript">document.onkeydown = function (e) { ShowSelection(); };</code>

入力タグ付きボタン:

このアプローチは、li タグを使用して描画されたボタンには機能しますが、 input タグを使用して描画されたボタンは正しく機能しません。後者の場合、onfocus イベントや onblur イベントを使用して選択を維持するなどの代替ソリューションが存在します。

提供されたコードを実装することで、開発者はテキスト ボックス コントロールから選択されたテキストを効率的にキャプチャして表示でき、シームレスな操作を保証します。さまざまなブラウザでのユーザー エクスペリエンス。

以上がJavaScript でテキストボックスから選択したテキストをキャプチャする方法: 包括的なソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。