logo标签列表

使用jQuery选择空文本输入框

jquerycss-selectors
108
我要如何使用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>
6
有人知道 '[value=]' 是否会忽略用户输入，只检查源代码中的内容吗？ - Cros
我是否正确，:empty过滤器是为此工作而制作的吗？$('input[type=text]:empty').doStuff(); - Antony Carthy
1
阅读文档 - http://docs.jquery.com/Selectors/empty。Empty 用于没有子元素的元素，而不是没有值的元素。 - Russ Cam
10个回答
206

另一种方法

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

});
1
工作选择器似乎与选择器中的:text有关 - 如果您打开工作演示并在URL后添加/edit，您可以尝试使用选择器。如果去掉:text，则选择器将不再正确工作，即使使用$('input[value=""]')也是如此。这可能是Sizzle选择器引擎中的一个错误，但我没有时间进行调查。顺便说一句，我建议在选择器中使用元素标签，否则每个元素都将被检查以查看是否存在属性值的匹配项。 - Russ Cam
3
好的回答！但你可能还需要确保输入元素的值实际上是 null（空白字符！）。在这种情况下，请确保去掉空格。可以像这样：$（'input：text'）。filter（function（）{return $（this）.val（）。trim（）==""; }）; - Vineeth Pradhan
32
请注意，如果元素存在但没有值属性，则[value=""]选择器无法工作，因为它找不到值属性。但是，在这种情况下.filter技术可以使用。 - AaronLS
你能在这里使用箭头函数编写ES6吗？ - Jwan622
@Jwan622 如果你的目标浏览器支持ECMAScript 6，那么是的。 - Russ Cam
显示剩余5条评论
26

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

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

然后像这样访问它们：

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
我有点担心性能问题。但可能是最简单的答案！ - aliqandil
20
$(":text[value='']").doStuff();

顺便提一下，你的调用是：

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

可以通过以下方式 大大地 简化和加速：

$('#cmdSubmit')...
我猜漏了一个闭方括号。这是jQuery未按预期工作的常见原因，很难发现 :-/ - OregonGhost
你的第一个例子基本上就是我的不工作的例子所做的事情。我想知道用户是否向输入字段添加了文本，而你的例子并没有这样做。 - Cros
我有些匆忙，你的示例似乎可以工作，但它没有按id进行选择，而这是我必须要做的。 - Cros
使用“input[id=..]”与“#”不同。 #不会给你一个对象数组。 - dev4life
@dev4life 如果您在页面上使用多个具有相同ID的元素，则做法是错误的。 - Sean Kendle
@SeanKendle 不是很确定。但每个人都有自己的选择。 - dev4life
12

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

$('input:text[value=""]');
在评论中指出，如果移除选择器中的:text部分，选择器将失败。我认为正在发生的是，Sizzle实际上在可能的情况下依赖于浏览器内置的选择器引擎。当将:text添加到选择器中时，它变成了一个非标准的CSS选择器，因此必须由Sizzle本身处理。这意味着Sizzle检查输入的当前值，而不是在源HTML中指定的"value"属性。因此这是一种聪明的检查空文本字段的方法，但我认为它依赖于Sizzle引擎（使用当前输入值而不是源代码中定义的属性）。虽然Sizzle可能会返回与此选择器匹配的元素，但document.querySelectorAll将仅返回在HTML中具有value=""的元素。Caveat emptor.
6

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

经过尝试了很多版本后，我发现这是最合理的。

请注意，text区分大小写。

4

这里有很多答案建议使用类似[value=""]的东西，但我认为那并不起作用......或者至少，用法是不一致的。我正在尝试做类似的事情，选择所有ID以某个字符串开头且没有输入值的输入。我尝试了这个：

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

但是它不起作用。反转它们也不行。请参见此示例。我发现正确选择所有以字符串开头且没有输入值的输入框的唯一方法是：

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

并且

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

但是显然，双重否定使得这个问题非常混乱。可能Russ Cam的第一个答案（使用过滤函数）是最清晰的方法。

4

借鉴@James Wiseman的回答，我正在使用这个：

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

这将会捕获那些仅包含空格的输入，除此之外还会捕获“真正”的空输入。
示例: http://jsfiddle.net/e9btdbyn/
3
我建议：
$('input:text:not([value])')
2
这样做行不通，因为[attribute]只查找属性的存在与否，而不是它是否具有值。<input value="">仍然会匹配。 - Ben Hull
当我使用Laravel生成表单字段时，这对我很有帮助（例如{{Form :: text（'first_name'，Input :: old（'first_name'），array（'class'=>'form-control'，'required'））}}），因为如果为空，Laravel不会添加'value'属性。所以我使用了：$（'input：text：not（[value]）：visible：enabled：first'）;来查找第一个可见的空启用文本输入字段。 - Ryan
1

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

$(':text[value=""][id^=txt]')
0
由于为每个比较创建一个 JQuery 对象不够高效，只需使用：
$.expr[":"].blank = function(element) {
    return element.value == "";
};

然后你可以这样做：

$(":input:blank")
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接