Bagaimanakah Saya Boleh Mengesan Teks dalam Medan Input Hanya Menggunakan CSS?

Kesan Teks dalam Medan Input Menggunakan CSS

CSS menawarkan pilihan terhad untuk mengesan jika medan input mengandungi teks. Pemilih kelas pseudo :kosong dan [value=""] tidak memberikan hasil yang memuaskan.

Penyelesaian Menggunakan :tempat-ditunjukkan

Untuk medan input dengan pemegang tempat atribut, kelas pseudo yang ditunjukkan oleh pemegang tempat boleh digunakan. Atribut pemegang tempat mentakrifkan teks pemegang tempat yang muncul apabila input kosong. Dengan memanfaatkan sifat ini, peraturan CSS berikut boleh digunakan:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Apabila input kosong, teks pemegang tempat ditunjukkan dan sempadan input akan ditetapkan kepada merah. Apabila pengguna memasukkan teks, teks pemegang tempat hilang dan warna jidar bertukar kepada hijau, menunjukkan kehadiran teks dalam input.

Penghadan

Penyelesaian ini mempunyai beberapa pengehadan:

• Ia memerlukan medan input untuk mempunyai atribut pemegang tempat.
• Pemegang tempat teks tidak boleh kosong. Walau bagaimanapun, satu aksara ruang boleh digunakan untuk mencipta ruang letak yang tidak kelihatan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Teks dalam Medan Input Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!