Bagaimanakah Saya Boleh Menggayakan Bahagian Nilai Medan Input Secara Selektif dengan JavaScript?

Menggayakan Bahagian Nilai Medan Input

Meningkatkan estetika medan input ialah tugas biasa dalam pembangunan web. Satu senario yang menarik melibatkan penggayaan selektif bahagian nilai medan input sebagai jenis pengguna. Walaupun penggayaan sedemikian pada mulanya kelihatan mudah, penyemak imbas menggunakan gaya secara konsisten merentas keseluruhan elemen input.

Untuk memintas pengehadan ini dan mencipta kesan yang diingini, penyelesaian yang lebih rumit diperlukan. JavaScript ialah alat yang sesuai untuk tugas ini, membolehkan kami memanipulasi elemen input secara dinamik. Kuncinya ialah membahagikan medan input kepada tiga bahagian berbeza:

• sebelum: Teks sebelum kedudukan kursor semasa pengguna
• diedit: Teks pada kedudukan kursor semasa pengguna
• selepas: Teks selepas kedudukan kursor semasa pengguna

Menggunakan JavaScript, kami boleh memasukkan elemen rentang di sekitar ketiga-tiga bahagian ini dan menggunakan gaya yang diingini dengan sewajarnya. Pendekatan ini berkesan mencipta medan input simulasi yang mencontohi kefungsian penggayaan yang kami cari.

Pertimbangkan penanda contoh berikut:

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

Dengan memantau interaksi pengguna seperti klik, kekunci kekunci dan kekunci, JavaScript boleh terus melaraskan penanda untuk mewakili tiga bahagian teks dengan betul. Ini membolehkan penggayaan masa nyata kandungan medan input, akhirnya mencapai kesan menggayakan bahagian nilai secara selektif.

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