JavaScript を使用して入力フィールドの値の一部を選択的にスタイル設定するにはどうすればよいですか?

入力フィールド値の一部のスタイル設定

入力フィールドの美しさを向上させることは、Web 開発における一般的なタスクです。興味深いシナリオの 1 つは、ユーザーが入力するときに入力フィールドの値の一部を選択的にスタイル設定することです。このようなスタイル設定は最初は簡単に見えるかもしれませんが、ブラウザは入力要素全体に一貫してスタイルを適用します。

この制限を回避して目的の効果を作成するには、より複雑なソリューションが必要です。 JavaScript はこのタスクに適したツールであり、入力要素を動的に操作できます。重要なのは、入力フィールドを 3 つの異なるセクションに分割することです:

• before: ユーザーの現在のカーソル位置の前のテキスト
• edited: ユーザーの現在のカーソル位置のテキスト
• after: テキストユーザーの現在のカーソル位置の後に

JavaScript を使用すると、これら 3 つのセクションの周囲に Span 要素を挿入し、それに応じて必要なスタイルを適用できます。このアプローチは、私たちが求めていたスタイル機能をエミュレートするシミュレートされた入力フィールドを効果的に作成します。

次のマークアップの例を考えてみましょう:

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

クリック、キーダウン、キーアップなどのユーザー インタラクションを監視することで、 JavaScript は、3 つのテキスト セクションを正しく表現するためにマークアップを継続的に調整できます。これにより、入力フィールドのコンテンツをリアルタイムでスタイル設定できるようになり、最終的に値の一部を選択的にスタイル設定する効果が得られます。

以上がJavaScript を使用して入力フィールドの値の一部を選択的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。