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

Mengesan Input Teks Menggunakan CSS

Keperluan biasa timbul apabila menyesuaikan halaman web menggunakan CSS: keupayaan untuk mengesan sama ada medan input mengandungi teks . Anehnya, fungsi ini tidak disediakan secara langsung oleh CSS.

Percubaan Penyelesaian

Pelbagai pendekatan tidak berjaya, termasuk menggunakan :empty pseudo-class dan menyemak nilai kosong [value=""].

Pemegang Tempat CSS Pendekatan

Walau bagaimanapun, jika medan input mempunyai atribut pemegang tempat, CSS menawarkan penyelesaian: kelas pseudo yang ditunjukkan oleh pemegang tempat. Kelas ini boleh digunakan untuk membezakan antara medan input kosong dan satu dengan ruang letak.

Pelaksanaan

Kuncinya adalah untuk memastikan atribut pemegang tempat hadir dan mengandungi nilai bukan kosong, walaupun ia hanya satu ruang. Berikut ialah contoh:

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

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

Kesimpulan

Menggunakan kelas pseudo yang ditunjukkan oleh pemegang tempat, anda boleh mengesan dengan berkesan sama ada medan input mengandungi teks, walaupun pada halaman yang anda tiada kawalan.

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