Tidak dapat mengawal halaman, tetapi mengesan sama ada input mengandungi teks melalui CSS

Question

Adakah terdapat cara untuk mengesan sama ada kotak input mempunyai teks melalui CSS? Saya cuba menggunakan :empty pseudo-class dan [value=""] Saya seperti tidak dapat mencari penyelesaian.

Saya rasa ia mesti boleh dilakukan, memandangkan kami mempunyai kelas pseudo seperti :checked dan :indeterminate

Sila ambil perhatian: Saya melakukan ini untuk gaya "Bergaya"

Juga ambil perhatian bahawa Bergaya digunakan pada halaman yang pengguna tidak mempunyai kawalan ke atas, pihak pelanggan.

Answer 1

Anda boleh menggunakan :placeholder-shownpseudo-classes. Secara teknikal, pemegang tempat diperlukan, tetapi anda boleh menggunakan ruang sebaliknya.

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

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

<input placeholder="需要文本" />
<input placeholder=" " value="这个有效" />
<input placeholder=" " />

Answer 2

Bergaya tidak boleh melakukan ini kerana CSS tidak membenarkannya. CSS tidak mempunyai pemilih (pseudo) untuk <input> nilai. Lihat:

• Spesifikasi Pemilih W3C
• Pemilih yang disokong Mozilla/Firefox
• Pelayar silang, jadual sokongan CSS3

:emptyPemilih hanya berfungsi pada nod anak, bukan pada nilai input.
[value=""][value=""]可以工作；但仅适用于初始状态。这是因为CSS所看到的节点的value属性与节点的value boleh berfungsi; tetapi hanya dalam keadaan awal

. Ini kerana nilai

property nod seperti yang dilihat oleh CSS adalah berbeza daripada valueproperty nod (diubah oleh pengguna atau JavaScript DOM dan diserahkan sebagai data borang) .

Melainkan anda hanya mengambil berat tentang keadaan awal,

anda mesti menggunakan skrip pengguna atau skrip Greasemonkey. Nasib baik, ia tidak sukar. Skrip berikut akan berfungsi dalam Chrome, atau dalam Firefox dengan Greasemonkey atau Scriptish dipasang, atau dalam mana-mana penyemak imbas yang menyokong skrip pengguna (iaitu kebanyakan penyemak imbas, kecuali IE).

Lihat demo pengehadan CSS dan penyelesaian JavaScript pada 🎜🎜halaman jsBin ini🎜🎜. 🎜

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}