Mən ziyarət etdiyim və kontrol etməyən bir səhifədə mətndə mətn CSS-dən istifadə edərək daxil olub-olmadığını müəyyən etmək üçün?

Bir girişin CSS-də mətnin olub-olmadığını müəyyən etmək üçün bir yol varmı? :empty boşqabdan istifadə etməyə çalışdım və heç birinin çalışmadığını [value=""] istifadə etməyə çalışdım. Göründüyü kimi bir həll tapa bilmirəm.

Hesab edirəm ki, bu, mümkündür, buna görə yanlış dərslərimiz olduğuna görə :checked:indeterminate edilmir, ikisi də oxşardır.

Xahiş edirik unutmayın: javascript istifadə edə bilməyən şık bir üslub üçün bunu edirəm .

Ayrıca, Stylish, istifadəçi nəzarət etməyən səhifələrdə müştərinin tərəfində istifadə edildiyini unutmayın.

97
06 июня '13 в 4:56 2013-06-06 04:56 JacobTheDev, 06.06.2013 saat 04:56 'da 2013-06-06 04:56' də soruşdu
@ 11 cavab

Stylish bunu edə bilməz, çünki CSS bunu edə bilməz. CSS <input> dəyərləri üçün (pseudo) seçicilərə malik deyil. Bax:

Seçici :empty yalnız girişi dəyərlərə deyil, uşaq nodlarına aiddir.
[value=""] işləri; yalnız ilkin vəziyyət üçün. Bu, node value özniteliğinin (CSS görən) node value mülkiyyətinə (istifadəçi və ya DOM javascript tərəfindən dəyişdirilmiş və forma verisi kimi) uyğun gəlmir.

Yalnız ilkin vəziyyət barədə düşünmürsəniz, istifadəçi və ya Greasemonkey skriptindən istifadə etməlisiniz. . Xoşbəxtlikdən, çətin deyil. Aşağıdakı script Chrome və ya Firefox-da Greasemonkey və ya Scriptish quraşdırılmış və ya istifadəçi skriptlərini dəstəkləyən hər hansı brauzerdə işləyəcək (IE-də, IE istisna olmaqla, bir çox brauzerlərdə).

Bu jsBin səhifəsində CSS məhdudiyyətləri və javascript həlli nümayişinə baxın.

44
06 июня '13 в 11:34 2013-06-06 11:34 Cavab Brock Adams tərəfindən 06.06.13 11:34 2013-06-06 11:34

Yəqin ki, adi CSS maddələri ilə və HTML kodunu dəyişdirə bilərsən. Elementə required atributu əlavə etsəniz, element uyğun olacaq :invalid və ya :valid nəzarətin dəyəri boş və ya olmamasına bağlı olaraq :valid . Element bir value xüsusiyyətinə malik deyilsə (və ya value="" ) varsa, nəzarət dəyəri əvvəlcə boşdur və hər hansı bir xarakter daxil olduqda (hətta bir boşluq) qeyri-boş olur.

Məsələn:

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

Pseudoclassified :valid:invalid iş sənədinin CSS sənədində müəyyən edilir, ancaq IE 10 ilə IE-də göründüyü istisna olmaqla brauzerlərdə dəstək geniş yayılmışdır.

border=0

"Boş" yalnız boşluqlardan ibarət olan dəyərləri əlavə etmək istəyirsinizsə, öznitelik pattern=.*\S.* əlavə edə bilərsiniz.

Giriş kontrollerinin qeyri-boş olub olmadığını birbaşa müəyyən etmək üçün heç bir CSS seçicisi yoxdur, buna görə də biz bunu yuxarıda göstərildiyi kimi dolayı yolla etməmiz lazımdır.

Bir qayda olaraq, CSS seçiciləri formatlaşdırmaya və ya bəzi hallarda element xüsusiyyətlərinə skriptlər (müştəri tərəfi JavaScript) istifadə edərək, istifadəçi hərəkətləri deyil, təyin edirlər. Məsələn :empty , markupda boş məzmunlu elementə cavab verir; bu mənada bütün input elementləri qaçılmaz olaraq boşdur. Selector [value=""] elementin marka value bir value xüsusiyyətinə sahib olub olmadığını yoxlayır və dəyəri kimi boş bir dize var. A :checked:indeterminate bənzər şeylərdir. Faktiki istifadəçi girişinə təsir yoxdur.

159
06 июня '13 в 10:55 2013-06-06 10:55 Cavab Jukka K. Korpela tərəfindən 06.06.13 saat 10:55 'da verilir. 2013-06-06 10:55

Yalançı sinfi istifadə edə bilərsiniz :placeholder-shown .

67
10 февр. Cavab ngryman tərəfindən verilir 10 fevral. 2016-02-10 00:39 '16 'da 0:39 2016-02-10 00:39
 <input onkeyup="this.setAttribute('value', this.value);" /> 

 input[value=""] 

işləyəcək: -)

redaktə: http://jsfiddle.net/XwZR2/

19
17 июня '14 в 10:57 2014-06-17 10:57 Cavab Tom D. tərəfindən 17 İyun, '14 'də 10:57 2014-06-17 10:57

Əsasən hər kəsin aradığı şey:

KİŞİ:

 input:focus:required{  color: red; border-color: red; box-shadow: 0 0 6px red;}   border-color: green; box-shadow: 0 0 8px green;} } 

Təmiz CSS:

 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;} 
11
04 мая '17 в 0:54 2017-05-04 00:54 Cavab Fábio ZC tərəfindən 04 May '17 'də 0:54 2017-05-04 00:54

Girdiyi input[type=text] mətnin üslubu ilə yazıb-açmadığına əsasən müxtəlif şəkildə dəyişə bilərsiniz. Hal-hazırda, bu rəsmi bir standart deyil, lakin geniş brauzer dəstəyi var, lakin müxtəlif prefikslərlə:

 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; } 

Məsələn: http://fiddlesalad.com/scss/input-placeholder-css

6
16 февр. cavara 16 feb verilir . 2015-02-16 19:59 '15 'də saat 19:59 ' da

JS və CSS-ni istifadə etmək: Pseudo Class deyil

 <input type="text" onkeyup="this.setAttribute('value', this.value);" value="" /> 
4
27 окт. Cavab Pavlo Kozaçukun 27 oktyabrda verdiyi cavab . 2016-10-27 14:08 '16 saat 02:08 'da 2016-10-27 14:08

bunu aşağıdakı kimi HTML hissəsində edin:

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

Lazım olan parametr giriş sahəsində olan mətnin etibarlı olmasını tələb edir.

2
06 июня '13 в 5:50 2013-06-06 05:50 Cavab Xedret tərəfindən 06.06.13 tarixində 5:50 2013-06-06 05:50

JQuery və CSS ilə sadə bir oyun:

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; } 
1
06 мая '14 в 21:41 2014-05-06 21:41 Cavab verilir Bren1818 May 06 '14 da 21:41 2014-05-06 21:41

etibarlı bir seçici hiylə etdi.

 <input type="text" class="myText" required="required" /> .myText { //default style of input } .myText:valid { //style when input has text } 
1
26 сент. Cavab Niels Steenbeek tərəfindən 26 Sentyabrda verilir. 2016-09-26 15:32 '16 saat 15:32 'də 2016-09-26 15:32

Bu css istifadə etmək mümkün deyil. Bunu etmək üçün JavaScript (məsələn, $("#input").val() == "" ).

-2
06 июня '13 в 5:12 2013-06-06 05:12 Cavab Logan tərəfindən 06.06.13 tarixində 5:12 2013-06-06 05:12 tərəfindən verilir

bağlı digər suallar və ya sual verin