Bolehkah CSS Mengesan Input Teks dalam Halaman Luaran Tanpa JavaScript?

Mengesan Input Teks Menggunakan CSS dalam Halaman Luaran Tidak Terkawal

Untuk menentukan sama ada medan input mengandungi teks semata-mata melalui CSS, pertimbangkan menggunakan atribut pemegang tempat. Walaupun pemegang tempat adalah perlu dan tidak boleh kosong, ia boleh ditetapkan kepada satu ruang.

Menggunakan Peraturan CSS:

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

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

Demonstrasi:

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

Dalam contoh ini, input dengan pemegang tempat dan tiada teks akan mempunyai sempadan hijau, menunjukkan bahawa ia kosong. Sebaliknya, input dengan pemegang tempat dan teks, atau dengan pemegang tempat dan nilai ruang sahaja, akan mempunyai sempadan merah.

Nota Tambahan:

• Kaedah ini berfungsi kerana :placeholder-shown ialah kelas pseudo yang sepadan dengan elemen yang menunjukkan a pemegang tempat.
• :tempat letak-ditunjukkan disokong dalam semua penyemak imbas utama.

Atas ialah kandungan terperinci Bolehkah CSS Mengesan Input Teks dalam Halaman Luaran Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!