Bolehkah Anda Menggayakan Bahagian Teks Medan Input?

Menggayakan Bahagian Medan Input

Soalan:

Adakah mungkin untuk memohon berbeza gaya kepada segmen tertentu nilai medan input apabila pengguna masuk teks?

Jawapan:

Malangnya, gaya tidak boleh digunakan secara selektif pada bahagian medan input.

Penyelesaian:

Untuk mencapai kesan yang diingini, penyelesaian yang melibatkan pelbagai elemen ialah perlu.

Pendekatan:

1. Bahagian Elemen:

   • Bahagi medan input kepada tiga bahagian berdasarkan sisipan titik:

     • Sebelum: Teks dimasukkan sebelum ini
     • Diedit: Teks sedang dimasukkan
     • Selepas : Teks dimasukkan selepas sisipan titik

2. Penjanaan Penanda:

   • Gantikan elemen input dengan elemen bekas yang menyerupai medan input.
   • Pisah nilai input asal kepada tiga bahagian yang dinyatakan di atas.
   • Balut setiap bahagian dalam elemen individu (mis., rentang).

3. Pengendalian Acara:

   • Pantau input pengguna menggunakan pendengar acara (cth., klik, keydown, keyup).
   • Gunakan peristiwa ini untuk mengenal pasti tiga bahagian nilai input.
   • Kemas kini gaya elemen berdasarkan bahagian yang diedit.

Contoh Penanda:

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

Atas ialah kandungan terperinci Bolehkah Anda Menggayakan Bahagian Teks Medan Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!