入力フィールドのテキストの一部をスタイル設定できますか?

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

質問:

別のスタイルを適用することは可能ですか?ユーザーが入力する入力フィールドの値の特定のセグメントにスタイルを適用するtext?

答え:

残念ながら、スタイルは入力フィールドの一部に選択的に適用できません。

回避策:

望ましい効果を達成するには、複数の要素を含む解決策が必要です。

アプローチ:

1. 要素分割:

   • 分割挿入に基づいて入力フィールドを 3 つのセクションに分割ポイント:

     • 前:前に入力したテキスト
     • 編集:現在入力中のテキスト
     • 後: 挿入後に入力されたテキストpoint

2. マークアップ生成:

   • 入力要素を次のようなコンテナ要素に置き換えます。入力フィールド。
   • 元の入力値を前述の 3 つのセクションに分割します。
   • 各セクションを個別の要素 (スパンなど) でラップします。

3. イベント処理:

   • イベント リスナーを使用してユーザー入力を監視します (例: クリック、キーダウン、 keyup).
   • これらのイベントを使用して、入力値の 3 つのセクションを識別します。
   • 編集されたセクションに基づいて要素スタイルを更新します。

マークアップの例:

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

以上が入力フィールドのテキストの一部をスタイル設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。