如何使用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>
答案 0 :(得分:188)
另一种方式
$('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 :(得分:26)
您也可以通过定义自己的选择器来实现:
$.extend($.expr[':'],{
textboxEmpty: function(el){
return $(el).val() === "";
}
});
然后像这样访问它们:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
答案 2 :(得分:19)
$(":text[value='']").doStuff();
顺便说一下,你打电话:
$('input[id=cmdSubmit]')...
可以大大简化并加速:
$('#cmdSubmit')...
答案 3 :(得分:12)
正如排名靠前的帖子所述,以下内容适用于Sizzle引擎。
$('input:text[value=""]');
在评论中,注意到删除选择器的:text
部分会导致选择器失败。我相信正在发生的事情是Sizzle在可能的情况下实际上依赖于浏览器的内置选择器引擎。当:text
添加到选择器时,它将成为非标准的CSS选择器,因此必须由Sizzle本身处理。这意味着Sizzle会检查INPUT的当前值,而不是源HTML中指定的“value”属性。
因此,这是一种检查空文本字段的聪明方法,但我认为它依赖于特定于Sizzle引擎的行为(使用INPUT的当前值而不是源代码中定义的属性)。虽然Sizzle可能会返回与此选择器匹配的元素,但document.querySelectorAll
只会返回HTML中包含value=""
的元素。注意事项。
答案 4 :(得分:4)
答案 5 :(得分:4)
基于@James Wiseman的回答,我正在使用它:
$.extend($.expr[':'],{
blank: function(el){
return $(el).val().match(/^\s*$/);
}
});
除了那些“真正”为空的输入之外,这将捕获仅包含空格的输入。
答案 6 :(得分:3)
我建议:
$('input:text:not([value])')
答案 7 :(得分:3)
这里有很多答案提示像[value=""]
这样的东西,但我不认为这确实有效。 。 。或者至少,用法不一致。我正在尝试做类似的事情,选择所有带有ID的输入,这些输入以某个也没有输入值的字符串开头。我试过这个:
$("input[id^='something'][value='']")
但它不起作用。也没有扭转它们。见fiddle。我发现正确选择所有带有以字符串开头且没有输入值的ID的输入的唯一方法是
$("input[id^='something']").not("[value!='']")
和
$("input[id^='something']:not([value!=''])")
但显然,双重否定使这真令人困惑。也许,Russ Cam的第一个答案(具有过滤功能)是最明确的方法。
答案 8 :(得分:1)
这将选择id为以“txt”开头的空文本输入:
$(':text[value=""][id^=txt]')
答案 9 :(得分:0)
由于为每个比较创建一个JQuery对象效率不高,因此只需使用:
$.expr[":"].blank = function(element) {
return element.value == "";
};
那么您可以做:
$(":input:blank")