使用jQuery选择空文本输入

103

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

jquery css-selectors

— 克罗斯
source

6

有人知道'[value =]'是否忽略用户输入而仅检查源代码吗？

— Cros

我是否可以为该工作创建：empty过滤器？$（'input [type = text]：empty'）。doStuff（）;

— 安东尼卡西

1

阅读docs-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);
  });

});

— 拉斯·卡姆
source

对我来说：if（$（'[id ^ = txt]'）。filter（function（）{return $（this）.val（）==“”;}）。length> 0）{alert（'WARNING' ）; }

— Cros

是什么将您的上一个示例与我的第二个示例区分开？我需要选择id，因为在实际代码中，我不会查看所有文本输入。我的第二个示例不适用于用户输入，但您可以。

— Cros

1

工作选择器似乎与选择器中的：text有关-如果打开工作演示并将URL添加/ edit，则可以使用所使用的选择器。如果取消：text，即使使用$（'input [value =“”]'），选择器也将无法正常工作。Sizzle选择器引擎中可能有一个错误，但我没有时间进行调查。顺便说一句，我建议在选择器中使用一个元素标签，否则将检查每个元素以查看属性值是否匹配。

— Russ Cam的

3

好答案！但是您可能还想确保输入元素的值在字面上为null（空格！）。在这种情况下，请确保剪裁出空格。像这样$('input:text').filter(function() { return $(this).val().trim() == ""; });

— Vineeth Pradhan 2012年

31

请注意，如果该元素存在但不具有value属性，则[value=""]选择器将不起作用，因为它找不到value属性。但是，.filter技术在这种情况下确实有效。

— AaronLS

26

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

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

然后像这样访问它们：

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

— 詹姆斯·怀斯曼
source

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

— aliqandil

19

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

？

顺便说一下，您的电话是：

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

可以大大简化并加快速度：

$('#cmdSubmit')...

— 克莱图斯
source

我想这里缺少一个右方括号。jQuery的常见来源无法正常工作，很难发现：-/

— OregonGhost，2009年

您的第一个示例基本上就是我无法正常工作的示例。我想知道用户是否在输入字段中添加了文本，您的示例没有这样做。

— Cros

我很仓促，您的示例似乎可以正常运行，但是它没有选择id，而我必须这样做。

— Cros

进行“ input [id = ..]”与“＃”不同。＃不给您对象数组。

— dev4life

@ dev4life如果您在具有相同ID的页面上使用多个元素，那么您做错了

— Sean Kendle

12

如排名最高的帖子中所述，以下与Sizzle引擎一起使用。

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

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

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

— 第三者
source

5

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

在尝试了很多版本之后，我发现这是最合逻辑的。

请注意，这text是区分大小写的。

4

基于@James Wiseman的答案，我正在使用以下代码：

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

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

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

— 脾气暴躁
source

3

我建议：

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

— TM值。
source

2

这是行不通的，因为[attribute]寻找属性的存在-不管它是否有值。<input value="">仍会匹配。

— 本·赫尔

当使用Laravel生成表单字段（例如{{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}）时，这对我很有帮助，因为Laravel如果空白则不添加'value'属性。因此，我然后使用了：$('input:text:not([value]):visible:enabled:first');查找第一个可见的空启用文本输入字段。

— 瑞安

3

这里有很多答案暗示着类似的东西，[value=""]但我认为并非如此。。。或至少用法不一致。我正在尝试做类似的事情，选择所有ID以从没有输入值的特定字符串开始的所有输入。我尝试了这个：

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

但这不起作用。也不会反转它们。看到这个小提琴。我发现正确选择ID以字符串开头且没有输入值的所有输入的唯一方法是

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

和

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

但显然，双重否定使这一点确实令人困惑。最有可能是Russ Cam的第一个答案（具有过滤功能）。

— 坦德鲁尼克霍尔斯
source

1

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

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

— 克罗斯
source

0

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

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

然后，您可以执行以下操作：

$(":input:blank")

— 轮胎
source