入力フィールドの値の特定部分のスタイルを設定するにはどうすればよいですか?

入力値の特定部分のスタイル設定

入力フィールドの値の特定部分のスタイル設定に関しては、スタイルが本質的に適用されることに注意してください。要素全体に。ただし、望ましい効果を達成するには、セマンティック マークアップの制約に従う創造的なアプローチが必要です。

ソリューションの概要

このソリューションには、ユーザーの編集ポイントに基づいて入力フィールドを分割することが含まれます。 3 つのセクションに分割:

1. 編集前のテキストpoint
2. 編集ポイントで編集可能なテキスト
3. 編集ポイント以降のテキスト

動的要素操作

として編集ポイントが移動する可能性があるため、動的ソリューションには JavaScript が必要になります。最初に、input 要素を、入力フィールドを模倣するスタイルのコンテナ要素に置き換えます。次に、JavaScript を使用して、上記の 3 つのセクションを個別の要素 (スパンなど) でラップし、それに応じて必要な色を適用します。

生成されたマークアップ

次の HTML 構造動的に生成された置換の開始点として機能する可能性がありますマークアップ:

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

イベント処理

最後に、click、keydown、keyup イベントを利用して 3 つの区分を識別し、それらを適切にラップすることができます。これにより、スタイルがユーザーの入力を動的に反映するようになります。

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