Question

如何使用jQuery识别空文本框？如果可能的话，我想使用选择器来做。此外，我必须选择id，因为在我想要使用的实际代码中我不想选择所有文本输入。

在我的以下两个代码示例中，第一个示例准确地显示了用户在文本框“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>

Answer 1

另一种方式

$('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=""]');

Working Demo

演示代码

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

});

Answer 2

您也可以通过定义自己的选择器来实现：

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

然后像这样访问它们：

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

Answer 3

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

顺便说一下，你打电话：

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

可以大大简化并加速：

$('#cmdSubmit')...

Answer 4

正如排名靠前的帖子所述，以下内容适用于Sizzle引擎。

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

在评论中，注意到删除选择器的:text部分会导致选择器失败。我相信正在发生的事情是Sizzle在可能的情况下实际上依赖于浏览器的内置选择器引擎。当:text添加到选择器时，它将成为非标准的CSS选择器，因此必须由Sizzle本身处理。这意味着Sizzle会检查INPUT的当前值，而不是源HTML中指定的“value”属性。

因此，这是一种检查空文本字段的聪明方法，但我认为它依赖于特定于Sizzle引擎的行为（使用INPUT的当前值而不是源代码中定义的属性）。虽然Sizzle可能会返回与此选择器匹配的元素，但document.querySelectorAll只会返回HTML中包含value=""的元素。注意事项。

Answer 5

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

在trying a lots of version之后我发现这是最合乎逻辑的。

请注意，text区分大小写。

Answer 6

基于@James Wiseman的回答，我正在使用它：

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

除了那些“真正”为空的输入之外，这将捕获仅包含空格的输入。

示例：http://jsfiddle.net/e9btdbyn/

Answer 7

我建议：

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

Answer 8

这里有很多答案提示像[value=""]这样的东西，但我不认为这确实有效。。。或者至少，用法不一致。我正在尝试做类似的事情，选择所有带有ID的输入，这些输入以某个也没有输入值的字符串开头。我试过这个：

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

但它不起作用。也没有扭转它们。见fiddle。我发现正确选择所有带有以字符串开头且没有输入值的ID的输入的唯一方法是

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

和

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

但显然，双重否定使这真令人困惑。也许，Russ Cam的第一个答案（具有过滤功能）是最明确的方法。

Answer 9

这将选择id为以“txt”开头的空文本输入：

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

Answer 10

由于为每个比较创建一个JQuery对象效率不高，因此只需使用：

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

那么您可以做：

$(":input:blank")

使用jQuery选择空文本输入

10 个答案:

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