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

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

内フィールドでは、ユーザー入力の特定部分のスタイルを変更するのが難しい場合があります。通常、スタイルは要素全体に適用されるため、直接実現することはできません。

JavaScript ベースのソリューション

この制限を回避するには、JavaScript ベースのアプローチを使用できます。 を置き換えます。 <div> のようなコンテナ要素を持つ要素

入力フィールドの分割

ユーザーが入力するときに、フィールドの 3 つのセクションを識別します:

• 変更前（未編集）
• 変更時点(編集済み)
• 変更後 (未編集)

これらの分割を のように別個の要素で囲みます。マークアップの例:

<div>

イベント処理とスタイル調整

クリック、キーダウン、キーアップ イベントを使用して、3 つの部門を動的に識別します。必要に応じてこれらのスパンにスタイルを適用して、目的の効果を実現します。

HTML の例:

<div class="input">

入力を置換する JavaScript:

let input = document.getElementById("fakeInput");
let originalInput = document.querySelector("input");
input.replaceWith(originalInput);

イベント処理とスパン追加:

originalInput.addEventListener("input", (e) => {
  let before = originalInput.value.substring(0, e.target.selectionStart);
  let edited = originalInput.value.substring(e.target.selectionStart, e.target.selectionEnd);
  let after = originalInput.value.substring(e.target.selectionEnd);

  let nonEditedBefore = document.createElement("span");
  nonEditedBefore.className = "nonEdited before";
  nonEditedBefore.textContent = before;

  let editedSpan = document.createElement("span");
  editedSpan.className = "edited";
  editedSpan.textContent = edited;

  let nonEditedAfter = document.createElement("span");
  nonEditedAfter.className = "nonEdited after";
  nonEditedAfter.textContent = after;

  input.appendChild(nonEditedBefore);
  input.appendChild(editedSpan);
  input.appendChild(nonEditedAfter);
});

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