การเลือกอินพุตข้อความว่างโดยใช้ jQuery

Question 1

ฉันจะระบุกล่องข้อความว่างโดยใช้ jQuery ได้อย่างไร ฉันต้องการทำโดยใช้ตัวเลือกถ้าเป็นไปได้ทั้งหมด นอกจากนี้ฉันต้องเลือกรหัสเนื่องจากในรหัสจริงที่ฉันต้องการใช้สิ่งนี้ฉันไม่ต้องการเลือกอินพุตข้อความทั้งหมด

ในสองตัวอย่างโค้ดต่อไปนี้รหัสแรกแสดงค่าที่ผู้ใช้พิมพ์ลงในช่องข้อความ "txt2" อย่างถูกต้อง ตัวอย่างที่สองระบุว่ามีช่องข้อความว่างอยู่ แต่ถ้าคุณกรอกข้อมูลลงไปก็ยังถือว่าว่างอยู่ ทำไมถึงเป็นแบบนี้?

สามารถทำได้โดยใช้เพียงแค่ตัวเลือกหรือไม่?

รหัสนี้รายงานค่าใน textbox "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>

Question 2

อีกวิธีหนึ่ง

$('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);
  });

});

Question 3

คุณสามารถทำได้โดยกำหนดตัวเลือกของคุณเอง:

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

จากนั้นเข้าถึงได้ดังนี้:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

Question 4

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

เหรอ?

อย่างไรก็ตามการโทรของคุณ:

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

สามารถอย่างมากง่ายและเร็วขึ้นด้วย:

$('#cmdSubmit')...

Question 5

ดังที่ได้กล่าวไว้ในโพสต์อันดับสูงสุดสิ่งต่อไปนี้ใช้ได้กับเอ็นจิ้น Sizzle

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

ในความคิดเห็นพบว่าการลบ:textส่วนของตัวเลือกทำให้ตัวเลือกล้มเหลว ฉันเชื่อว่าสิ่งที่เกิดขึ้นคือ Sizzle อาศัยเบราว์เซอร์ที่สร้างขึ้นในเอ็นจิ้นตัวเลือกเมื่อเป็นไปได้ เมื่อ:textถูกเพิ่มลงในตัวเลือกมันจะกลายเป็นตัวเลือก CSS ที่ไม่ได้มาตรฐานดังนั้น Sizzle จึงต้องจัดการเอง ซึ่งหมายความว่า Sizzle ตรวจสอบค่าปัจจุบันของ INPUT แทนที่จะเป็นแอตทริบิวต์ "value" ที่ระบุใน HTML ต้นทาง

ดังนั้นจึงเป็นวิธีที่ชาญฉลาดในการตรวจสอบช่องข้อความว่าง แต่ฉันคิดว่ามันขึ้นอยู่กับพฤติกรรมเฉพาะของเอ็นจิ้น Sizzle (โดยใช้ค่าปัจจุบันของ INPUT แทนแอตทริบิวต์ที่กำหนดในซอร์สโค้ด) แม้ว่า Sizzle อาจส่งคืนองค์ประกอบที่ตรงกับตัวเลือกนี้ แต่document.querySelectorAllจะส่งคืนเฉพาะองค์ประกอบที่มีvalue=""ใน HTML ข้อแม้ emptor

Question 6

`$("input[type=text][value=]")`

หลังจากลองหลายเวอร์ชันฉันพบว่านี่เป็นเหตุผลที่สุด

โปรดทราบว่าtextคำนึงถึงขนาดตัวพิมพ์

Question 7

มีคำตอบมากมายที่แนะนำสิ่งที่ต้องการ[value=""]แต่ฉันไม่คิดว่าจะได้ผลจริง . . หรืออย่างน้อยการใช้งานไม่สม่ำเสมอ ฉันกำลังพยายามทำสิ่งที่คล้ายกันโดยเลือกอินพุตทั้งหมดที่มีรหัสเริ่มต้นด้วยสตริงที่ไม่มีค่าที่ป้อน ฉันลองสิ่งนี้:

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

แต่มันไม่ได้ผล และไม่ย้อนกลับ ดูซอนี้ วิธีเดียวที่ฉันพบในการเลือกอินพุตทั้งหมดที่มีรหัสขึ้นต้นด้วยสตริงและไม่มีค่าที่ป้อนได้อย่างถูกต้องคือ

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

และ

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

แต่เห็นได้ชัดว่าเชิงลบสองเท่าทำให้สับสนจริงๆ อาจเป็นไปได้ว่าคำตอบแรกของ Russ Cam (พร้อมฟังก์ชั่นการกรอง) เป็นวิธีการที่ชัดเจนที่สุด

Question 8

จากคำตอบของ @James Wiseman ฉันใช้สิ่งนี้:

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

สิ่งนี้จะจับอินพุตที่มีเฉพาะช่องว่างนอกเหนือจากที่ว่างเปล่าอย่างแท้จริง

ตัวอย่าง: http://jsfiddle.net/e9btdbyn/

Question 9

ฉันขอแนะนำ:

$('input:text:not([value])')

Question 10

การดำเนินการนี้จะเลือกอินพุตข้อความว่างที่มี id ที่ขึ้นต้นด้วย "txt":

$(':text[value=""][id^=txt]')

Question 11

เนื่องจากการสร้างวัตถุ JQuery สำหรับการเปรียบเทียบทุกครั้งไม่มีประสิทธิภาพให้ใช้:

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

จากนั้นคุณสามารถทำได้:

$(":input:blank")