JQuery का उपयोग करके खाली पाठ इनपुट का चयन करना

103

मैं jQuery का उपयोग करके खाली टेक्स्टबॉक्स की पहचान कैसे करूं? मैं चयनकर्ताओं का उपयोग करना चाहूंगा यदि यह बिल्कुल संभव है। इसके अलावा, मुझे उस आईडी पर सेलेक्ट करना होगा जब से मैं वास्तविक कोड का उपयोग करना चाहता हूं जहां मैं सभी टेक्स्ट इनपुट का चयन नहीं करना चाहता।

मेरे निम्नलिखित दो कोड उदाहरणों में उपयोगकर्ता द्वारा टेक्स्टबॉक्स "txt2" में टाइप किए गए मान को पहले सटीक रूप से प्रदर्शित करता है। दूसरा उदाहरण पहचानता है कि एक खाली टेक्स्टबॉक्स है, लेकिन यदि आप इसे भरते हैं तब भी इसे खाली मानते हैं। ऐसा क्यों है?

क्या यह सिर्फ चयनकर्ताओं का उपयोग करके किया जा सकता है?

यह कोड टेक्स्टबॉक्स "txt2" में मूल्य की रिपोर्ट करता है:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

यह कोड हमेशा टेक्स्टबॉक्स "txt2" को खाली बताता है:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>
jquery  css-selectors 
— क्रॉस
स्रोत
6
क्या किसी को पता है कि '[value =]' उपयोगकर्ता इनपुट को अनदेखा करता है और केवल जाँचता है कि स्रोत में क्या है?
— Cros
क्या मैं सही हूं कि: इस काम के लिए खाली फिल्टर बनाया जाता है? $ ( 'इनपुट [प्रकार = पाठ]: खाली')। doStuff ();
— एंटोनी कैरी
1
डॉक्स - docs.jquery.com/Selectors/empty को पढ़ें । खाली उन तत्वों के लिए है जिनके कोई संतान नहीं है, कोई मूल्य नहीं है
— Russ Cam

जवाबों:

196

दूसरा रास्ता 

$('input:text').filter(function() { return $(this).val() == ""; });

या 

$('input:text').filter(function() { return this.value == ""; });

या

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

वर्किंग डेमो

डेमो से कोड

jQuery

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});
— रस कैम
स्रोत
मेरे लिए: अगर ($ ('[id ^ = txt]')। फ़िल्टर (फ़ंक्शन () {रिटर्न $ (यह) .val () == "";}); लंबाई> 0) {अलर्ट ('चेतावनी') ); }
— Cros
आपके अंतिम उदाहरण को मेरे दूसरे से क्या अलग करता है? मुझे आईडी पर चयन करने की आवश्यकता है, क्योंकि वास्तविक कोड में मैं सभी पाठ इनपुटों को नहीं देखूंगा। मेरा दूसरा उदाहरण उपयोगकर्ता इनपुट के साथ काम नहीं करता है, लेकिन आपका है।
— Cros
1
काम करने वाले चयनकर्ता के साथ ऐसा लगता है: चयनकर्ता में पाठ - यदि आप कार्यशील डेमो खोलते हैं और URL में जोड़ते हैं, तो आप उपयोग किए गए चयनकर्ता के साथ खेल सकते हैं। यदि आप: पाठ को हटा देते हैं, तो चयनकर्ता अब $ ('इनपुट [मूल्य = "" ") के साथ भी सही ढंग से काम नहीं करता है। संभवतः Sizzle चयनकर्ता इंजन में एक बग है, लेकिन मेरे पास जांच करने का समय नहीं है। वैसे, मैं चयनकर्ता में एक तत्व टैग का उपयोग करने का सुझाव दूंगा, अन्यथा प्रत्येक तत्व को यह देखने के लिए जांचा जाएगा कि क्या विशेषता मानों के लिए कोई मेल है।
— रस कैम
3
अच्छा उत्तर! लेकिन आप यह भी सुनिश्चित कर सकते हैं कि इनपुट तत्व का मूल्य वस्तुतः अशक्त (रिक्त स्थान!) है। सुनिश्चित करें कि आप उस स्थिति में रिक्त स्थानों को ट्रिम कर देंगे। कुछ इस तरह$('input:text').filter(function() { return $(this).val().trim() == ""; });
— विनीत प्रधान
31
ध्यान दें कि यदि तत्व मौजूद है, लेकिन उसके पास कोई मान विशेषता नहीं है, तो [value=""]चयनकर्ता काम नहीं करता है क्योंकि यह एक मान विशेषता नहीं पाता है। हालाँकि .filter तकनीक इस परिदृश्य में काम करती है।
— एरोनल्स
26

आप अपने स्वयं के चयनकर्ता को परिभाषित करके भी ऐसा कर सकते हैं:

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

और फिर उन्हें इस तरह एक्सेस करें:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
— जेम्स वाइसमैन
स्रोत
मैं प्रदर्शन को लेकर थोड़ा चिंतित हूं। लेकिन शायद सबसे आसान जवाब!
— एलिक्ज़ैंडिल
19 
$(":text[value='']").doStuff();

?

वैसे, आपकी कॉल:

$('input[id=cmdSubmit]')...

बहुत सरल किया जा सकता है और इसके साथ गति दी जा सकती है :

$('#cmdSubmit')...
— cletus
स्रोत
मुझे लगता है कि एक समापन वर्ग ब्रैकेट गायब है। JQuery का एक सामान्य स्रोत जो उम्मीद के
— मुताबिक
आपका पहला उदाहरण मूल रूप से मेरा काम नहीं कर रहा उदाहरण है। मैं जानना चाहता हूं कि क्या उपयोगकर्ता ने इनपुट फ़ील्ड में पाठ जोड़ा है, आपका उदाहरण ऐसा नहीं करता है।
— क्रोस
मैं जल्दबाजी कर रहा था, आपका उदाहरण काम करने लगता है, लेकिन यह आईडी पर चयन नहीं करता है, जो मुझे करना चाहिए।
— क्रॉस
"इनपुट [आईडी = ..] करना" "#" के समान नहीं है। # आपको वस्तुओं की एक सरणी नहीं देता है।
— dev4life
@ dev4life यदि आप एक ही आईडी वाले पृष्ठ पर कई तत्वों का उपयोग कर रहे हैं, तो आप इसे गलत कर रहे हैं
— सीन केंडल
12

जैसा कि शीर्ष रैंक पोस्ट में उल्लेख किया गया है, निम्नलिखित सिज़ल इंजन के साथ काम करता है।

$('input:text[value=""]');

टिप्पणियों में, यह ध्यान दिया गया कि :textचयनकर्ता के हिस्से को हटाने से चयनकर्ता विफल हो जाता है। मेरा मानना ​​है कि यह क्या हो रहा है कि Sizzle वास्तव में जब संभव हो तो चयनकर्ता इंजन में निर्मित ब्राउज़र पर निर्भर करता है। जब :textचयनकर्ता को जोड़ा जाता है, तो यह एक गैर-मानक सीएसएस चयनकर्ता बन जाता है और इसके लिए सिज़ल को खुद को संभालना चाहिए। इसका मतलब यह है कि स्रोत HTML में निर्दिष्ट "मूल्य" विशेषता के बजाय, Sizzle INPUT के वर्तमान मूल्य की जांच करता है।

इसलिए यह खाली पाठ क्षेत्रों की जांच करने का एक चतुर तरीका है, लेकिन मुझे लगता है कि यह Sizzle इंजन के लिए विशिष्ट व्यवहार पर निर्भर करता है (जो कि स्रोत कोड में परिभाषित विशेषता के बजाय INPUT के वर्तमान मूल्य का उपयोग करता है)। हालांकि Sizzle उन तत्वों को वापस कर सकता है जो इस चयनकर्ता से मेल खाते हैं, document.querySelectorAllकेवल वे तत्व वापस आएंगे value=""जो HTML में हैं। कैवियट खाली करनेवाला।

— thirdender
स्रोत
4

@James Wiseman के उत्तर पर बिल्डिंग, मैं इसका उपयोग कर रहा हूं: 

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

यह उन इनपुटों को पकड़ लेगा, जिनमें केवल व्हाट्सएप है, जो 'सही मायने में' खाली हैं।

उदाहरण: http://jsfiddle.net/e9btdbyn/

— Gruffy
स्रोत
3

मैं सुझाऊंगा:

$('input:text:not([value])')
— टीएम।
स्रोत
2
यह काम नहीं करेगा, क्योंकि [विशेषता] एक विशेषता की उपस्थिति की तलाश करता है - न कि इसका कोई मूल्य है या नहीं। <input value="">अभी भी मैच होगा
— बेन हल
फॉर्म फील्ड (उदा {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) उत्पन्न करने के लिए लारवेल का उपयोग करते समय यह मेरे लिए मददगार था क्योंकि लारवेल रिक्त होने पर एक 'मूल्य' विशेषता नहीं जोड़ता है। इसलिए मैंने तब उपयोग किया: $('input:text:not([value]):visible:enabled:first');पहला दृश्यमान खाली सक्षम पाठ इनपुट फ़ील्ड खोजने के लिए।
— रायन
3

यहाँ बहुत सारे उत्तर हैं जो कुछ इस तरह का सुझाव देते हैं [value=""]लेकिन मुझे नहीं लगता कि वास्तव में काम करता है। । । या कम से कम, उपयोग सुसंगत नहीं है। मैं कुछ समान करने की कोशिश कर रहा हूं, एक निश्चित स्ट्रिंग के साथ आईडी के साथ सभी इनपुट का चयन करना, जिसमें कोई भी प्रवेश मूल्य नहीं है। मैंने यह कोशिश की:

$("input[id^='something'][value='']")

लेकिन यह काम नहीं करता है। न ही उनका उलटा करता है। देखिए यह फील । एकमात्र तरीके जो मैंने सही ढंग से पाया कि स्ट्रिंग के साथ शुरू किए गए आईडी के साथ सभी इनपुट का चयन करें और बिना दर्ज किए मूल्य थे

$("input[id^='something']").not("[value!='']")

तथा

$("input[id^='something']:not([value!=''])")

लेकिन जाहिर है, दोहरे नकारात्मक वास्तव में भ्रमित करते हैं। संभवतः, रस कैम का पहला जवाब (फ़िल्टरिंग फ़ंक्शन के साथ) सबसे स्पष्ट तरीका है।

— tandrewnichols
स्रोत
1

यह "txt" से शुरू होने वाली आईडी के साथ खाली पाठ इनपुट का चयन करेगा:

$(':text[value=""][id^=txt]')
— क्रॉस
स्रोत
0

चूंकि हर तुलना के लिए JQuery ऑब्जेक्ट बनाना कुशल नहीं है, बस उपयोग करें:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

तो आप कर सकते हैं:

$(":input:blank")
— टायर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.