पता लगाएँ कि क्या सीएसएस में पाठ का उपयोग किया गया है - मैं जिस पृष्ठ पर जा रहा हूं और उसे नियंत्रित नहीं करता हूं?

Question

क्या सीएसएस के माध्यम से इनपुट में टेक्स्ट है या नहीं, इसका पता लगाने का कोई तरीका है? मैंने :emptyछद्म वर्ग का उपयोग करने की कोशिश की है , और मैंने उपयोग करने की कोशिश की है [value=""], जिसमें से कोई भी काम नहीं किया है। मुझे इसका एक भी समाधान नहीं मिल रहा है।

मुझे लगता है कि यह संभव होना चाहिए, यह देखते हुए कि हमारे पास छद्म कक्षाएं हैं :checked, और :indeterminate, दोनों एक ही तरह की हैं।

कृपया ध्यान दें: मैं इसे "स्टाइलिश" शैली के लिए कर रहा हूं , जो जावास्क्रिप्ट का उपयोग नहीं कर सकती है।

यह भी ध्यान दें, कि स्टाइलिश उपयोग किया जाता है, क्लाइंट-साइड, उन पृष्ठों पर जो उपयोगकर्ता नियंत्रित नहीं करता है।

Comments

मैं इसे सीएसएस के साथ करने के तरीके के बारे में सुनिश्चित नहीं हूं (जो कि मक्खी पर अपडेट नहीं करता है, वैसे भी)। यह जावास्क्रिप्ट के साथ आसान है, हालांकि।

— राल्फ।

मुझे नहीं लगता कि मैं जावास्क्रिप्ट का उपयोग कर सकता हूं। मैं एक "स्टाइलिश" शैली पर काम कर रहा हूं। बहुत यकीन है कि यह पूरी तरह से सीएसएस के साथ किया जाना है। यदि यह अपडेट नहीं होता है क्योंकि उपयोगकर्ता पाठ में प्रवेश करता है, तो मुझे लगता है कि यह समय की बर्बादी है। उस बारे में नहीं सोचा था। हम्म। कम से कम यह शैली के लिए महत्वपूर्ण नहीं है, यह सिर्फ एक अच्छा हिस्सा है जिसे मैं जोड़ने की उम्मीद कर रहा था।

— जैकब डेव जु

संभव डुप्लिकेट : नहीं (: खाली) सीएसएस चयनकर्ता काम नहीं कर रहा है?

— डैनी बेकेट

Answer 1

स्टाइलिश ऐसा नहीं कर सकता क्योंकि CSS ऐसा नहीं कर सकता। CSS में <input>value (s) के लिए कोई (छद्म) चयनकर्ता नहीं हैं । देख:

• W3C चयनकर्ता कल्पना
• मोज़िला / फ़ायरफ़ॉक्स ने चयनकर्ताओं का समर्थन किया
• क्रॉस-ब्राउज़र, CSS3 समर्थन तालिका

:emptyचयनकर्ता इकलौती संतान नोड्स, नहीं इनपुट मानों को दर्शाता है। काम
[value=""] करता है ; लेकिन केवल प्रारंभिक अवस्था के लिए। ऐसा इसलिए है क्योंकि नोड का value गुण (जो CSS देखता है), नोड की value संपत्ति (उपयोगकर्ता या DOM जावास्क्रिप्ट द्वारा परिवर्तित, और प्रपत्र डेटा के रूप में प्रस्तुत) के समान नहीं है।

जब तक आप केवल प्रारंभिक स्थिति के बारे में परवाह नहीं करते हैं, तो आपको एक उपयोगकर्ता नाम या Greasemonkey स्क्रिप्ट का उपयोग करना चाहिए । सौभाग्य से यह कठिन नहीं है। निम्न स्क्रिप्ट क्रोम में काम करेगी, या फ़ायरफ़ॉक्स के साथ Greasemonkey या स्क्रिप्टिश स्थापित, या किसी भी ब्राउज़र में जो IE (को छोड़कर, ज्यादातर उपयोगकर्ताओं को समर्थन करता है)।

इस jsBin पृष्ठ पर CSS प्लस के जावास्क्रिप्ट सॉल्यूशन की सीमाओं का डेमो देखें ।

// ==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";
}

Comments

मैं उस उपयोगकर्ता चीज़ को देखूंगा। धन्यवाद।

— याकूबTheDev

@MartinGottweis, ओपी के मामले में ऐसा नहीं है। यह एक [स्टाइलिश] सवाल है।

— ब्रॉक एडम्स

@BrockAdams, op कह रहा है कि यह जावास्क्रिप्ट का उपयोग नहीं कर सकता है, इसलिए: वैध विकल्प एक रास्ता है। क्या मैं कुछ भूल रहा हूँ?

— मार्टिन गॉटवेइस

@MartinGottweis, :validविकल्प पृष्ठ को फिर से लिखने की आवश्यकता है - जो कुछ ओपी स्टाइलिश के साथ ऐसा नहीं कर सकते है और अन्य जवाब में से कोई भी दिखाने के सब पर एक ब्राउज़िंग संदर्भ में। उपयोगकर्ता उस पृष्ठ पर कोई नियंत्रण नहीं रखता है जो वह दौरा कर रहा है।

— ब्रॉक एडम्स

Answer 2

यह सामान्य सीएसएस caveats के साथ संभव है, और अगर HTML कोड को संशोधित किया जा सकता है। यदि आप requiredतत्व में विशेषता जोड़ते हैं , तो तत्व का मिलान होगा :invalidया उसके :validअनुसार नियंत्रण का मूल्य खाली है या नहीं। यदि तत्व में कोई valueविशेषता नहीं है (या इसमें है value=""), तो नियंत्रण का मूल्य शुरू में खाली है और किसी भी चरित्र (यहां तक ​​कि एक स्थान) में प्रवेश करने पर गैर-रिक्त हो जाता है।

उदाहरण:

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

छद्म श्रेणी के :validऔर :invalidकार्यशील ड्राफ्ट स्तर सीएसएस दस्तावेजों में ही परिभाषित किए गए हैं, लेकिन समर्थन ब्राउज़रों में व्यापक रूप से व्यापक है, सिवाय इसके कि IE में, यह IE 10 के साथ आया था।

यदि आप "रिक्त" बनाना चाहते हैं, तो उन मानों को शामिल करें जिनमें केवल रिक्त स्थान शामिल हैं, आप विशेषता जोड़ सकते हैं pattern=.*\S.*।

सीधे तौर पर यह पता लगाने के लिए कोई सीएसएस चयनकर्ता नहीं है कि क्या इनपुट नियंत्रण का कोई गैर-रिक्त मान है, इसलिए हमें इसे अप्रत्यक्ष रूप से करने की आवश्यकता है, जैसा कि ऊपर वर्णित है।

आमतौर पर, सीएसएस चयनकर्ता मार्कअप या कुछ मामलों में, उपयोगकर्ता कार्यों के बजाय स्क्रिप्टिंग (क्लाइंट-साइड जावास्क्रिप्ट) के साथ सेट किए गए गुणों को संदर्भित करते हैं। उदाहरण के लिए, :emptyमार्कअप में खाली सामग्री के साथ तत्व से मेल खाता है; inputइस अर्थ में सभी तत्व अपरिहार्य रूप से खाली हैं। चयनकर्ता [value=""]परीक्षण करता है कि क्या तत्व valueमें मार्कअप की विशेषता है और उसके मूल्य के रूप में खाली स्ट्रिंग है। और :checkedऔर :indeterminateइसी तरह की चीजें हैं। वे वास्तविक उपयोगकर्ता इनपुट से प्रभावित नहीं होते हैं।

Comments

यह एक शानदार समाधान है यदि और केवल यदि हर इनपुट की आवश्यकता है - यदि नहीं, तो आप ऐसी स्थिति में भाग लेते हैं, जहां आपके पास अमान्य शैली द्वारा अप्रभावित खाली खाली मान्य फ़ील्ड है । JS संभवतः इस समाधान के लिए विजेता है

— AdamSchuld

यह गंदा लेकिन आश्चर्यजनक रूप से चालाक है। सवाल का हल नहीं, लेकिन इसने यकीनन मेरे लिए मुश्किल काम किया

— Jan

गंदा घोल। ध्यान दें कि इससे क्रोम में स्वत: पूर्ण होने में समस्या हो सकती है यदि आप इस पर आधारित लेबल डिस्प्ले लॉजिक को जोड़ने का प्रयास करते हैं या यदि इनपुट की वास्तव में आवश्यकता नहीं है और इसके आधार पर सत्यापन की आवश्यकता है

— Artjom Kurapov

शब्दार्थ यह गलत है। जैसा कि पिछली टिप्पणियों में बताया गया है, कुछ इनपुट वैकल्पिक हो सकते हैं, और requiredविशेषता फ़ॉर्म जमा को रोक सकती है।

— झेनमिंग

जोड़ी novalidateपर विशेषता <form>: तत्व तो लाल प्रदर्शन के बारे में कोई चिंता नहीं है जब क्षेत्र के बाद एक बार भरा खाली है कि<form ... novalidate> <input ... required /> </form>

— Alcalyn

Answer 3

आप :placeholder-shownछद्म वर्ग का उपयोग कर सकते हैं । तकनीकी रूप से एक प्लेसहोल्डर की आवश्यकता होती है, लेकिन आप इसके बजाय एक स्थान का उपयोग कर सकते हैं।

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=" " />

Comments

यह IE या फ़ायरफ़ॉक्स दुर्भाग्य से बिल्कुल भी समर्थित नहीं है। स्रोत: caniuse.com/#feat=css-placeholder-shown

— सीन डावसन

बहुत बढ़िया जवाब। ब्राउज़र का समर्थन बेकार है, लेकिन अगर एक पॉलीफ़िल निकलती है, :placeholder-shownतो यह स्वीकृत उत्तर बन जाना चाहिए। requiredविधि खाता हाशिये मामलों पर ध्यान नहीं देता। यह ध्यान दिया जाना चाहिए कि आप एक प्लेसहोल्डर को एक स्थान दे सकते हैं और यह विधि अभी भी काम करेगी। कुडोस।

— carantimmons

इसका दूसरा पहलू यह है कि आपको वास्तव में एक प्लेसहोल्डर की जरूरत है। दूसरे शब्दों में, input:not(:placeholder-shown)हमेशा <input/>वैल्यू न होने पर भी मेल खाएगा ।

— Redbmk

मेरे लिए यह क्रोम, फायरफॉक्स और सफारी में काम करता है। IE11 में नहीं।

— J0ANMM

@redbmk के रूप में उल्लेख किया गया corysimmons, यह ध्यान दिया जाना चाहिए कि आप एक प्लेसहोल्डर के लिए एक स्थान पारित कर सकते हैं और यह विधि अभी भी काम करेगी।

— नईम बागी

Answer 4

<input onkeyup="this.setAttribute('value', this.value);" />

तथा

input[value=""]

काम करेगा :-)

संपादित करें: http://jsfiddle.net/XwZR2/

Comments

क्या वह CSS है? यह HTML और जावास्क्रिप्ट की तरह दिखता है (लेकिन मुझे गलत किया जा सकता है)।

— jww

ब्रूक एडम्स ने लिखा: [मूल्य = ""] काम करता है; लेकिन केवल प्रारंभिक अवस्था के लिए। ऐसा इसलिए है क्योंकि नोड का मान गुण (जो CSS देखता है), नोड के मान गुण (उपयोगकर्ता या DOM जावास्क्रिप्ट के द्वारा परिवर्तित, और प्रपत्र डेटा के रूप में प्रस्तुत) के समान नहीं है। -> जादू परिवर्तन पर मूल्य विशेषता को अद्यतन करने के लिए है: jsfiddle.net/XwZR2

— टॉम डी।

@ JánosWeisz नहीं यह नहीं होगा। उस हैंडलर को उस स्क्रिप्ट में हेरफेर करने से पहले सेट किया जाएगा और यह addEventListener के साथ हैंडलर को जोड़ा जा सकता है।

— डिनोबॉफ

जाहिर है, ऑनकीप केवल कीबोर्ड इनपुट का ख्याल रखता है। हालांकि, यह मत भूलो कि आप अपने माउस का उपयोग करके टेक्स्ट को इनपुट बॉक्स में पेस्ट कर सकते हैं। इसे आज़माएं: अपने क्लिपबोर्ड में कुछ टेक्स्ट कॉपी करें और फिर इनपुट पर राइट-क्लिक करें और पेस्ट पर क्लिक करें। देखो सीएसएस काम नहीं कर रहा है। अपने माउस के साथ इनपुट बॉक्स में टेक्स्ट ड्रैग-एंड-ड्रॉप के साथ भी।

— बेलुगा

input[value]:not([value=""])- बेहतर है। सभी को धन्यवाद। codepen.io/iegik/pen/ObZpqo

— iegik

Answer 5

मूल रूप से हर कोई क्या चाहता है:

कम से:

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

शुद्ध सीएसएस:

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

Comments

आपने स्पष्ट रूप से केवल काम करने वाले समाधान का उपयोग किया है और आपको 0 अप-वोट वाट्स मिला है?

— प्रॉनोब जूल

बहुत बढ़िया जवाब। प्लेसहोल्डर-दिखाया गया छद्म वर्ग IE या एज में काम नहीं करता है, हालाँकि, यह एक पूर्ण समाधान नहीं है। हालांकि, यह करीब से क्षतिग्रस्त है, और यह मुझे समर्थन नहीं करने के लिए एज की हत्या करना चाहता है। IE मैं स्वीकार कर सकता था, लेकिन एज? माइक्रोसॉफ्ट!

— एरॉन मार्टिन-कोल्बी

यदि आप अपने HTML में "आवश्यक" जोड़ना चाहते हैं, तो यह एक शुद्ध सीएसएस समाधान नहीं है

— user1566694 22

धन्यवाद, श्रीमान, मुझे पूरी उम्मीद है कि यह मेरी राय के बाद से अधिक हो जाता है, यह वही है जो ज्यादातर लोग वास्तव में चाहते हैं।

— sivi911

Answer 6

आप placeholderw / o requiredफील्ड के ऊपर लिखी ट्रिक का उपयोग कर सकते हैं ।

इसके साथ समस्या requiredयह है कि जब आपने कुछ लिखा था, तब इसे हटा दिया था - अब इनपुट हमेशा HTML5 कल्पना के भाग के रूप में लाल होगा - फिर आपको इसे ठीक करने / ओवरराइड करने के लिए ऊपर लिखे गए सीएसएस की आवश्यकता होगी।

आप साधारण चीज़ w / o कर सकते हैं required

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

सीएसएस

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

कोड पेन: https://codepen.io/arlevi/pen/LBgXjZ

Comments

यह दृष्टिकोण मेरे उपयोग के मामले के लिए एकदम सही था। मेरे पास खोज फ़िल्टर थे जो वैसे भी प्लेसहोल्डर थे, और मैं चाहता था कि इनपुट बॉक्स की सीमा को उजागर किया जाए जब एक मूल्य मौजूद था।

— स्टीफन टटलबी

Answer 7

सरल सीएसएस:

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

यदि इनपुट भरा हुआ है तो यह कोड दिए गए सीएसएस को पेज लोड पर लागू करने जा रहा है।

Comments

यह केवल पेज लोड पर काम करता है। एक मान टाइपिंग गतिशील नहीं।

— बेन रेसिकॉट

इस उत्तर के लिए पृष्ठ लोड मुद्दा स्पष्ट होना चाहिए।

— ब्रायस स्नाइडर

Answer 8

आप input[type=text]प्लेसहोल्डर को स्टाइल करके टेक्स्ट में इस बात पर निर्भर कर सकते हैं कि इनपुट में टेक्स्ट है या नहीं। यह इस बिंदु पर एक आधिकारिक मानक नहीं है, लेकिन विभिन्न उपसर्गों के साथ विस्तृत ब्राउज़र समर्थन है:

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

उदाहरण: http://fiddlesalad.com/scss/input-placeholder-css

Comments

FYI करें, यह मज़बूती से प्लेसहोल्डर को प्रारूपित करता है, लेकिन केवल प्लेसहोल्डर को ही। यह आपको पाठ रंग बदलने का भ्रम देता है, लेकिन यह पहले से ही मामला है, बस डिफ़ॉल्ट रूप से ग्रे और काले रंग के साथ।

— जॉन वीज़

CSS के सभी एक सस्ता भ्रम है, आप केवल वास्तविक सामग्री को प्रभावित किए बिना दिखावे को बदल देते हैं :-)

— vbraun

मुझे ठीक इसी की आवश्यकता थी। मुझे शैलियों को बदलने के लिए इनपुट की आवश्यकता होती है यदि इसमें टेक्स्ट होता है क्योंकि प्लेसहोल्डर के लिए डिज़ाइन इनपुट शैली से भिन्न होता है। उत्तम!

— क्रिस्टोफर मार्शल

यह पृष्ठभूमि के लिए काम करता है, लेकिन सीमाओं के लिए नहीं। मैंने सीमा को बदलने की कोशिश में बहुत गहरी खुदाई नहीं की।

— मजनूइबू

Answer 9

जेएस और सीएसएस का उपयोग: छद्मकोश नहीं

 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="" />

   

Answer 10

वैध चयनकर्ता चाल करेंगे।

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

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

Answer 11

आप प्लेसहोल्डर का उपयोग कर सकते हैं और उपयोग कर सकते हैं:

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

Answer 12

JQuery और CSS के साथ सरल ट्रिक जैसे:

JQuery:

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

सीएसएस:

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

Answer 13

इसे इस तरह HTML भाग पर करें:

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

आवश्यक पैरामीटर को मान्य होने के लिए इनपुट फ़ील्ड में पाठ की आवश्यकता होगी।

Comments

यह यह पता लगाने में मदद नहीं करता है कि इनपुट में सीएसएस के साथ पाठ है, जो सवाल था।

— जुक्का के। कोर्पेला

क्षमा करें, यह वास्तव में मदद करता है ... यह छद्म वर्गों का उपयोग करना संभव बनाता है, जैसा कि मेरे उत्तर में बताया गया है।

— जुक्का के। कोर्पेला

यह एक स्टाइलिश प्रश्न है - जिसका अर्थ है कि ओपी लक्ष्य पृष्ठ को नियंत्रित या बदल नहीं सकता है। वह केवल पृष्ठ क्लाइंट-साइड देखता है।

— ब्रॉक एडम्स

यह सुपर सहायक था, यहाँ एक उदाहरण है कि Xedret किस बारे में बात कर रहा है: codepen.io/tolmark12/pen/LsBvf

— tolmark

****** <इनपुट आवश्यक> && इनपुट: मान्य {...} ******

— FremyCompany

Answer 14

हाँ! आप इसे मूल्य चयनकर्ता के साथ सरल बुनियादी विशेषता के साथ कर सकते हैं।

रिक्त मान के साथ विशेषता चयनकर्ता का उपयोग करें और गुण लागू करें input[value='']

input[value=''] {
    background: red;
}

Answer 15

सीएसएस के साथ यह संभव नहीं है। इसे लागू करने के लिए आपको जावास्क्रिप्ट (जैसे $("#input").val() == "") का उपयोग करना होगा ।

Comments

मुझे पता है कि ऐसा कैसे करना है, मुझे इसे सीएसएस के साथ करने की आवश्यकता है। कृपया मूल पोस्ट पर टिप्पणियों को पढ़ें। मैं एक "स्टाइलिश" शैली का निर्माण कर रहा हूं, जो मेरे ज्ञान के लिए जावास्क्रिप्ट का उपयोग नहीं कर सकती है।

— जैकब डेव