Bagaimanakah Saya Boleh Menggayakan Bahagian Khusus Nilai Medan Input dengan Warna Berbeza?

Menggayakan Bahagian Nilai Medan Input

Memandangkan senario di mana medan input memaparkan teks dalam warna merah, tetapi bahagian tertentu perlu dibezakan dengan warna biru, siasatan ini menangani kemungkinan untuk mencapai gaya ini kesan.

Jawapan:

Malangnya, penggayaan CSS digunakan secara seragam pada keseluruhan elemen input, menghalang pengubahan terpilih bagi bahagian tertentu.

Penyelesaian:

Untuk memintas had ini, pendekatan berbilang elemen adalah perlu, membahagikan medan input kepada tiga bahagian logik:

• Sebelum titik penyuntingan (bahagian yang tidak diedit)
• Pada titik penyuntingan (bahagian yang sedang disunting)
• Selepas titik penyuntingan (belum disunting bahagian)

Pembahagian ini tidak boleh dicapai melalui elemen input tunggal, memerlukan penggunaan JavaScript.

1. Penanda Awal:
   Mula dengan elemen input tanpa gaya standard. JavaScript akan menggantikan elemen input ini dengan elemen bekas bergaya yang direka bentuk untuk menyerupai medan input.
2. Balut Dinamik:
   Laksanakan pengendali acara JavaScript (cth., klik, kekunci kekunci, kekunci) ke mengenal pasti tiga bahagian. Balut bahagian ini dalam elemen HTML yang sesuai (cth., ) dan gunakan penggayaan yang berbeza mengikut keperluan.

Contoh Penanda:

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

Melalui kaedah ini, kesan yang diingini untuk menggayakan bahagian tertentu nilai medan input boleh dicapai sambil mengekalkan kebolehcapaian input padang.

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