Bagaimanakah Saya Boleh Menggayakan Bahagian Khusus Nilai Medan Input Menggunakan JavaScript?

Menggayakan Bahagian Khusus Nilai Medan Input

Dalam medan, menukar gaya bahagian tertentu input pengguna boleh menjadi mencabar. Memandangkan gaya biasanya digunakan pada keseluruhan elemen, ia tidak boleh dicapai secara langsung.

Penyelesaian Berasaskan JavaScript

Untuk memintas pengehadan ini, pendekatan berasaskan JavaScript boleh digunakan. Gantikan elemen dengan elemen bekas seperti <div> dan gayakannya supaya menyerupai medan input.

Bahagian Medan Input

Apabila pengguna menaip, kenal pasti tiga bahagian medan:

• Sebelum perubahan (tidak disunting)
• Pada titik perubahan (diedit)
• Selepas perubahan (tidak diedit)

Balut bahagian ini dalam elemen berasingan seperti . Contoh penanda:

<div>

Pengendalian Acara dan Pelarasan Gaya

Gunakan acara klik, keydown dan keyup untuk mengenal pasti tiga bahagian secara dinamik. Gunakan penggayaan pada rentang ini mengikut keperluan untuk mencapai kesan yang diingini.

Contoh HTML:

<div class="input">

JavaScript untuk Menggantikan Input:

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

Pengendalian dan Rentang Acara Tambahan:

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);
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Bahagian Khusus Nilai Medan Input Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!