使用 jQuery 选择空文本输入答案

【问题标题】：Selecting empty text input using jQuery使用 jQuery 选择空文本输入
【发布时间】：2010-11-20 22:17:50
【问题描述】：

如何使用 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>

【问题讨论】：

有谁知道 '[value=]' 是否会忽略用户输入并只检查源中的内容？
我说 :empty 过滤器是为这项工作设计的吗？ $('input[type=text]:empty').doStuff();
阅读文档 - docs.jquery.com/Selectors/empty。 Empty 用于没有子元素的元素，NOT 没有值

标签： jquery css-selectors

【解决方案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);
  });

});

【讨论】：

对我来说：if($('[id^=txt]').filter(function() { return $(this).val() == ""; }).length > 0) { 警报('警告'); }
您的最后一个示例与我的第二个示例有何不同？我需要在 id 上进行选择，因为在实际代码中我不会查看所有文本输入。我的第二个示例不适用于用户输入，但您的可以。
工作选择器似乎与选择器中的 :text 有关 - 如果您打开工作演示并将 /edit 添加到 URL，您可以使用使用的选择器。如果您取消 :text，选择器将不再正常工作，即使使用 $('input[value=""]')。可能是 Sizzle 选择器引擎中的一个错误，但我没有时间调查。顺便说一句，我建议在选择器中使用元素标签，否则将检查每个元素以查看属性值是否匹配。
不错的答案！但是您可能还想确保输入元素的值实际上是 null（空格！）。确保在这种情况下修剪掉空格。像这样$('input:text').filter(function() { return $(this).val().trim() == ""; });
请注意，如果元素存在但没有 value 属性，则 [value=""] 选择器不起作用，因为它找不到 value 属性。但是 .filter 技术在这种情况下确实有效。

【解决方案2】：

您也可以通过定义自己的选择器来做到这一点：

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

然后像这样访问它们：

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

【讨论】：

我有点担心性能。但可能是最简单的答案！

【解决方案3】：

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

?

顺便说一句，您的电话：

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

可以大大简化和加速：

$('#cmdSubmit')...

【讨论】：

我猜缺少一个右方括号。 jQuery 的常见来源无法按预期工作，很难发现：-/
你的第一个例子基本上就是我不工作的例子所做的。我想知道用户是否在输入字段中添加了文本，您的示例没有这样做。
我很仓促，您的示例似乎有效，但它没有选择 id，我必须这样做。
执行“input[id=..]”与“#”不同。 # 不会给你一个对象数组。
@dev4life 如果您在同一 ID 的页面上使用多个元素，那么您做错了

【解决方案4】：

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

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

在 cmets 中，注意到删除选择器的 :text 部分会导致选择器失败。我相信发生的事情是 Sizzle 实际上尽可能依赖浏览器的内置选择器引擎。当:text 被添加到选择器时，它变成了一个非标准的 CSS 选择器，因此必须由 Sizzle 自己处理。这意味着 Sizzle 检查 INPUT 的当前值，而不是源 HTML 中指定的“值”属性。

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

【讨论】：

【解决方案5】：

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

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

请注意，text 区分大小写。

【讨论】：

【解决方案6】：

这里有很多答案建议像[value=""] 这样的东西，但我认为这实际上行不通。 . .或者至少，用法并不一致。我正在尝试做类似的事情，选择所有以某个字符串开头且没有输入值的 id 的输入。我试过这个：

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

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

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

和

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

但显然，双重否定使这非常令人困惑。可能，Russ Cam 的第一个答案（带有过滤功能）是最清晰的方法。

【讨论】：

【解决方案7】：

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

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

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

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

【讨论】：

【解决方案8】：

我会推荐：

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

【讨论】：

这不起作用，因为 [attribute] 寻找属性的存在 - 而不是它是否具有值。 <input value=""> 仍然匹配。
这对我使用 Laravel 生成表单字段（例如 {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}）很有帮助，因为如果 Laravel 为空，它不会添加“值”属性。所以我然后使用：$('input:text:not([value]):visible:enabled:first'); 找到第一个可见的空启用文本输入字段。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

那么你可以这样做：

$(":input:blank")

【讨论】：