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

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

入力フィールドにテキストが赤色で表示されるが、特定の部分を区別する必要があるシナリオを検討します。青色を使用したこの調査では、このスタイルを実現する可能性について検討します。効果。

答え:

残念ながら、CSS スタイルは入力要素全体に均一に適用され、特定の部分を選択的に変更することはできません。

解決策:

この制限を回避するには、複数要素のアプローチが必要で、入力フィールドを 3 つの論理セクションに分割します:

• 編集点前 (未編集部分)
• 編集点 (現在編集中の部分) )
• 編集時点以降 (未編集の残り部分)

この分割はできません単一の入力要素によって実現され、JavaScript の使用が必要になります。

1. 初期マークアップ:
   標準のスタイルのない入力要素から始めます。 JavaScript は、この入力要素を、入力フィールドに似せて設計された様式化されたコンテナ要素に置き換えます。
2. 動的ラッピング:
   JavaScript イベント ハンドラー (クリック、キーダウン、キーアップなど) を実装して、 3つの部門を特定します。これらの部分を適切な HTML 要素 (例: ) で囲み、必要に応じて個別のスタイルを適用します。

マークアップの例:

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

スルーこのメソッドを使用すると、入力のアクセシビリティを維持しながら、入力フィールド値の特定の部分をスタイル設定するという望ましい効果を達成できます。フィールド。

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