Mendeteksi jika suatu input memiliki teks di dalamnya menggunakan CSS - pada halaman yang saya kunjungi dan tidak mengontrol?

187

Apakah ada cara untuk mendeteksi apakah suatu input memiliki teks di dalamnya melalui CSS? Saya sudah mencoba menggunakan :emptypseudo-class, dan saya sudah mencoba menggunakan [value=""], tidak ada yang berhasil. Sepertinya saya tidak dapat menemukan solusi tunggal untuk ini.

Saya membayangkan ini harus dimungkinkan, mengingat kami memiliki kelas pseudo untuk :checked, dan :indeterminate, keduanya merupakan hal yang serupa.

Harap dicatat: Saya melakukan ini untuk gaya "Bergaya" , yang tidak dapat memanfaatkan JavaScript.

Perhatikan juga, bahwa Stylish digunakan, di sisi klien, pada halaman yang tidak dikontrol pengguna.

JacobTheDev
sumber
Saya tidak yakin cara untuk melakukannya dengan CSS (yang tidak diperbarui saat itu juga). Ini mudah dengan JavaScript.
ralph.m
Saya rasa saya tidak bisa menggunakan JavaScript. Saya sedang mengerjakan gaya "gaya". Cukup yakin itu harus dilakukan sepenuhnya dengan CSS. Jika itu tidak akan diperbarui saat pengguna memasukkan teks, saya kira ini adalah buang-buang waktu. Tidak memikirkan itu. Hmm. Setidaknya ini tidak penting untuk gaya, itu hanya kebaikan yang saya harapkan untuk ditambahkan.
JacobTheDev
2
kemungkinan duplikat : tidak (: kosong) pemilih CSS tidak berfungsi?
Danny Beckett

Jawaban:

66

Stylish tidak dapat melakukan ini karena CSS tidak dapat melakukan ini. CSS tidak memiliki penyeleksi (pseudo) untuk <input>nilai. Lihat:

The :emptypemilih hanya merujuk pada node anak, tidak nilai input.
[value=""] melakukan kerja; tetapi hanya untuk kondisi awal . Ini karena value atribut simpul (yang dilihat CSS), tidak sama dengan value properti simpul (Diubah oleh pengguna atau javascript DOM, dan dikirimkan sebagai data formulir).

Kecuali jika Anda hanya peduli pada kondisi awal, Anda harus menggunakan skrip usersos atau Greasemonkey. Untungnya ini tidak sulit. Skrip berikut akan berfungsi di Chrome, atau Firefox dengan Greasemonkey atau Scriptish diinstal, atau di browser apa pun yang mendukung skrip pengguna (yaitu sebagian besar browser, kecuali IE).

Lihat demo batas CSS ditambah solusi javascript di 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";
}
Brock Adams
sumber
Saya akan melihat ke dalam hal script pengguna. Terima kasih.
JacobTheDev
@ Martin Gottweis, tidak dalam kasus OP itu tidak. Ini adalah pertanyaan [gaya] .
Brock Adams
1
@BrockAdams, op mengatakan itu tidak dapat menggunakan javascript, jadi opsi: valid adalah cara untuk pergi. Apakah saya melewatkan sesuatu?
Martin Gottweis
1
@ MartinGottweis, :validopsi ini membutuhkan penulisan ulang halaman - yang merupakan sesuatu yang tidak bisa dilakukan OP dengan Stylish dan tidak ada jawaban lain yang menunjukkan sama sekali dalam konteks penelusuran. Pengguna tidak memiliki kendali atas halaman yang ia kunjungi.
Brock Adams
265

Mungkin saja, dengan peringatan CSS biasa dan jika kode HTML dapat dimodifikasi. Jika Anda menambahkan requiredatribut ke elemen, maka elemen tersebut akan cocok :invalidatau :validsesuai dengan apakah nilai kontrol kosong atau tidak. Jika elemen tidak memiliki valueatribut (atau memiliki value=""), nilai kontrol awalnya kosong dan menjadi kosong ketika karakter apa pun (bahkan spasi) dimasukkan.

Contoh:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

Pseudo-classed :validdan :invaliddidefinisikan dalam dokumen CSS tingkat Draf Kerja saja, tetapi dukungan agak meluas di browser, kecuali bahwa di IE, ia datang dengan IE 10.

Jika Anda ingin membuat "kosong" menyertakan nilai yang hanya terdiri dari spasi, Anda bisa menambahkan atribut pattern=.*\S.*.

Tidak ada (saat ini) pemilih CSS untuk mendeteksi secara langsung apakah kontrol input memiliki nilai kosong, jadi kita perlu melakukannya secara tidak langsung, seperti dijelaskan di atas.

Umumnya, penyeleksi CSS merujuk pada markup atau, dalam beberapa kasus, ke properti elemen yang diatur dengan skrip (JavaScript sisi klien), daripada tindakan pengguna. Misalnya, :emptymencocokkan elemen dengan konten kosong di markup; semua inputelemen tak terhindarkan kosong dalam pengertian ini. Selector [value=""]menguji apakah elemen memiliki valueatribut dalam markup dan memiliki string kosong sebagai nilainya. Dan :checkeddan :indeterminatehal-hal serupa. Mereka tidak terpengaruh oleh input pengguna aktual.

Jukka K. Korpela
sumber
7
Ini adalah solusi hebat jika dan hanya jika setiap input diperlukan - jika tidak, Anda mengalami situasi di mana Anda memiliki bidang input yang kosong namun valid yang tidak terpengaruh oleh gaya yang tidak valid . JS mungkin adalah pemenang untuk solusi ini
AdamSchuld
7
ini kotor tapi sangat pintar. Bukan solusi untuk pertanyaan itu, tetapi itu memang berhasil bagi saya
Jan
1
Solusi kotor. Perhatikan bahwa ini dapat menyebabkan masalah dengan pelengkapan otomatis di Chrome jika Anda mencoba menambahkan logika tampilan label berdasarkan ATAU ini jika input sebenarnya tidak diperlukan dan formulir memiliki validasi berdasarkan ini
Artjom Kurapov
1
Secara semantik ini salah. Seperti disebutkan dalam komentar sebelumnya, beberapa input mungkin opsional, dan requiredatribut dapat mencegah pengiriman formulir.
zhenming
1
Menambahkan novalidateatribut pada <form>elemen sehingga tidak khawatir tentang tampilan merah ketika bidang kosong setelah diisi sekali:<form ... novalidate> <input ... required /> </form>
Alcalyn
228

Anda bisa menggunakan :placeholder-shownkelas pseudo. Secara teknis placeholder diperlukan, tetapi Anda dapat menggunakan spasi sebagai gantinya.

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

input:placeholder-shown {
  border-color: red;
}
<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

orang Inggris
sumber
10
Sayangnya, ini tidak didukung oleh IE atau Firefox. Sumber: caniuse.com/#feat=css-placeholder-shown
Sean Dawson
2
Jawaban yang luar biasa. Dukungan browser menyebalkan, tetapi jika polyfill keluar :placeholder-shownmaka ini harus menjadi jawaban yang diterima. The requiredMetode tidak memperhitungkan kasus rekening pinggiran. Perlu dicatat bahwa Anda dapat memberikan ruang kepada placeholder dan metode ini akan tetap berfungsi. Pujian.
corysimmons
5
Kelemahan lain untuk ini adalah Anda tampaknya harus benar-benar memiliki placeholder. Dengan kata lain, input:not(:placeholder-shown)akan selalu cocok <input/>bahkan jika tidak ada nilai.
redbmk
5
Bagi saya ini berfungsi di Chrome, Firefox dan Safari. Tidak di IE11.
J0ANMM
1
@redbmk seperti yang disebutkan corysimmons, Perlu dicatat bahwa Anda dapat memberikan spasi kepada placeholder dan metode ini masih akan berfungsi.
Naeem Baghi
32
<input onkeyup="this.setAttribute('value', this.value);" />

dan

input[value=""]

akan bekerja :-)

edit: http://jsfiddle.net/XwZR2/

Tom D.
sumber
24
Apakah itu CSS? Sepertinya HTML dan Javascript (tapi saya bisa saja salah).
jww
Brook Adams menulis: [value = ""] tidak berfungsi; tetapi hanya untuk kondisi awal. Ini karena atribut nilai simpul (yang dilihat CSS), tidak sama dengan properti nilai simpul (Diubah oleh pengguna atau javascript DOM, dan dikirimkan sebagai data formulir). -> Keajaibannya adalah memperbarui atribut nilai pada perubahan: jsfiddle.net/XwZR2
Tom D.
2
@ JánosWeisz tidak, tidak akan. Handler itu akan disetel sebelum skrip dapat memanipulasi elemen itu dan itu dapat bekerja bersama handler yang ditambahkan dengan addEventListener.
Dinoboff
1
Jelas, onkeyup menangani input keyboard saja. Namun, jangan lupa bahwa Anda dapat menempelkan teks ke dalam kotak input menggunakan mouse Anda. Cobalah: Salin beberapa teks ke clipboard Anda dan kemudian klik kanan input dan klik Tempel. Tonton CSS TIDAK berfungsi. Sama dengan drag-and-drop teks ke dalam kotak input dengan mouse Anda.
beluga
4
input[value]:not([value=""])- lebih baik. Terimakasih untuk semua. codepen.io/iegik/pen/ObZpqo
iegik
30

Pada dasarnya yang dicari semua orang adalah:

KURANG:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

CSS murni:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
Fábio ZC
sumber
1
Anda jelas baru saja menggunakan solusi kerja dan Anda mendapat 0 up-vote WaT?
ProNOOB
5
Jawaban yang luar biasa. Pseudo-class: placeholder yang ditunjukkan tidak berfungsi di IE atau Edge, jadi itu bukan solusi lengkap. Tapi sangat dekat, dan itu membuatku ingin membunuh Edge karena tidak mendukungnya. IE yang bisa saya terima, tapi Edge? Ayo Microsoft!
Aaron Martin-Colby
2
Ini bukan solusi css murni jika Anda harus menambahkan "wajib" ke html Anda
user1566694
Terima kasih tuan yang baik, saya sangat berharap ini menjadi lebih tinggi karena menurut saya inilah yang benar-benar diinginkan kebanyakan orang.
sivi911
19

Anda dapat menggunakan placeholdertrik seperti yang tertulis di atas tanpa requiredbidang.

Masalahnya requiredadalah ketika Anda menulis sesuatu, kemudian menghapusnya - input sekarang akan selalu merah sebagai bagian dari spesifikasi HTML5 - maka Anda akan membutuhkan CSS seperti yang ditulis di atas untuk memperbaiki / menimpanya.

Anda dapat melakukan hal-hal sederhana tanpa required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

Pena kode: https://codepen.io/arlevi/pen/LBgXjZ

Ricky Levi
sumber
1
Pendekatan ini sangat cocok untuk kasus penggunaan saya. Saya memiliki filter pencarian yang memiliki placeholder, dan saya ingin batas kotak input disorot ketika ada nilai.
Stephen Tuttlebee
9

Css sederhana:

input[value]:not([value=""])

Kode ini akan menerapkan css yang diberikan pada pemuatan halaman jika input diisi.

Breno Teixeira
sumber
9
Ini hanya berfungsi pada pemuatan halaman. Tidak dinamis mengetikkan nilai.
Ben Racicot
Masalah pemuatan halaman harus secara eksplisit dicatat untuk jawaban ini.
Bryce Snyder
6

Anda dapat gaya input[type=text]berbeda tergantung pada apakah input memiliki teks dengan menata placeholder. Ini bukan standar resmi pada saat ini tetapi memiliki dukungan browser yang luas, meskipun dengan berbagai awalan:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

Contoh: http://fiddlesalad.com/scss/input-placeholder-css

vbraun
sumber
FYI, ini dengan andal memformat placeholder, tetapi hanya placeholder itu sendiri. Ini memberi Anda ilusi mengubah warna teks, tapi itu sudah terjadi, hanya dengan abu-abu dan hitam secara default.
John Weisz
Semua CSS adalah ilusi murahan, Anda hanya mengubah penampilan tanpa memengaruhi konten yang sebenarnya :-)
vbraun
Inilah yang saya butuhkan. Saya meminta input untuk mengubah gaya jika memiliki teks karena desain untuk placeholder berbeda dari gaya input. Sempurna!
Christopher Marshall
Ini berfungsi untuk latar belakang, tetapi tidak berbatasan. Saya tidak menggali terlalu dalam untuk mencoba mengubah perbatasan.
majinnaibu
5

Menggunakan JS dan CSS: bukan pseudoclass

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }
<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

Pavlo Kozachuk
sumber
3

The pemilih yang valid akan melakukan trik.

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}
Niels Steenbeek
sumber
3

Anda dapat memanfaatkan placeholder dan menggunakan:

input:not(:placeholder-shown) {
  border: 1px solid red;
}
Scottyzen
sumber
1

Trik Sederhana dengan jQuery dan CSS Seperti:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }
Bren1818
sumber
1

lakukan pada bagian HTML seperti ini:

<input type="text" name="Example" placeholder="Example" required/>

Parameter yang diperlukan akan membutuhkannya untuk memiliki teks di bidang input agar valid.

Xedret
sumber
Ini tidak membantu mendeteksi apakah input memiliki teks di dalamnya dengan CSS, yang merupakan pertanyaan.
Jukka K. Korpela
Maaf, ini benar-benar membantu ... Memungkinkan untuk menggunakan pseudo-class, seperti yang dijelaskan dalam jawaban saya.
Jukka K. Korpela
1
Ini adalah pertanyaan Stylish - yang berarti OP tidak dapat mengontrol atau mengubah halaman target. Dia hanya melihat halaman sisi klien.
Brock Adams
3
Ini sangat membantu, inilah contoh yang dibicarakan Xedret
tolmark
****** <input diperlukan> && input: valid {...} ******
FremyCompany
0

Iya! Anda dapat melakukannya dengan atribut dasar sederhana dengan pemilih nilai.

Gunakan pemilih atribut dengan nilai kosong dan terapkan properti input[value='']

input[value=''] {
    background: red;
}
Hidayt Rahman
sumber
-6

Ini tidak mungkin dengan css. Untuk menerapkan ini, Anda harus menggunakan JavaScript (misalnya $("#input").val() == "").

Logan
sumber
2
Saya tahu bagaimana melakukan itu, saya perlu melakukannya dengan CSS. Silakan baca komentar di posting asli. Saya sedang membangun gaya "Bergaya", yang tidak bisa memanfaatkan JavaScript, setahu saya.
JacobTheDev