jquery - 使用 jQuery 选择空文本输入

标签 jquery css-selectors

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

最佳答案

另一种方式

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

});

关于jquery - 使用 jQuery 选择空文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1299424/

相关文章:

html - :hover color is not working

javascript - Angularjs Protractor : Valid Selector for excluding nested elements

使用 lxml、xpath 和 css 选择器的 Python 脚本也返回空列表

javascript - jQuery/Javascript 与 Galleria 冲突

javascript - CSS 非典型清除 float 错误

javascript - 如何根据先前的子宽度计算 div 的宽度

JQuery 在类里面停止切换

jQuery 验证插件组 : Error message shows for last invalid field instead of first invalid field in the group

css - 奇怪的 CSS 语法。 [类^ ='icon-'],[类* =' icon-']

css - 为什么这里有两个冒号?跨度::之前