Bagaimanakah CSS Boleh Mengesan Kehadiran Teks dalam Medan Input pada Laman Web Luaran?

Kesan Kehadiran Teks Input Menggunakan CSS Merentasi Halaman Tidak Terkawal

Mengesan kehadiran teks dalam medan input ialah tugas biasa, tetapi kaedah tradisional seperti :empty dan [value=""] mungkin tidak berfungsi dengan berkesan dalam semua senario. Untuk situasi di mana JavaScript tidak boleh diakses, gaya CSS boleh dimanfaatkan untuk mencapai matlamat ini.

Menggunakan : Kelas Pseudo yang ditunjukkan oleh pemegang tempat

Jika elemen input termasuk atribut pemegang tempat , kelas pseudo yang ditunjukkan oleh pemegang tempat akan mula dimainkan. Kelas pseudo ini menyasarkan medan input tempat teks pemegang tempat kelihatan, menunjukkan bahawa medan itu kosong.

Pelaksanaan:

input:not(:placeholder-shown) {
  /* CSS styles applied when input has text */
}

input:placeholder-shown {
  /* CSS styles applied when input is empty */
}

Contoh Penggunaan:

<input placeholder="Text is required">

<input placeholder=" " value="This one is valid">

<input placeholder=" ">

Dengan pendekatan ini, dua input pertama akan menerima gaya digunakan pada :not(:placeholder-shown) kerana ia mengandungi teks atau mempunyai nilai ruang letak bukan kosong. Input ketiga, yang mempunyai ruang letak tetapi tiada teks, akan menerima gaya yang digunakan pada :tempat letak-ditunjukkan.

Kaedah ini amat berguna apabila bekerja dengan tema dan gaya yang digunakan pada halaman pihak ketiga menggunakan sambungan penyemak imbas seperti Bergaya, kerana ia membenarkan penyesuaian berdasarkan kehadiran atau ketiadaan teks dalam medan input tanpa memerlukan JavaScript.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Mengesan Kehadiran Teks dalam Medan Input pada Laman Web Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!