Question

我有一个包含许多用户输入文本框的表单，所有这些文本框都设置了placeholder个属性。要求用户填写具有name属性值的特定模式的所有文本输入。在表单提交上，我们使用一个jQuery选择器来查找/计算所有空输入（具有空value属性的输入），以便我们可以突出显示这些input元素以供用户填写。不幸的是，我发现Internet Explorer 8＆amp; 9（可能更早）将placeholder值视为value。

HTML：

<input name="tb1" type="text" placeholder="foo" />
<input name="tb2" type="text" placeholder="bar" />
<input name="tb3" type="text" placeholder="baz" />
<button id="b1" type="button">Count Empty Text-boxes</button>

的JavaScript：

$('#b1').click(function () {
    var emptyTextboxes = $('input[name^="tb"][value=""]:visible');
    alert('Num empty text-boxes: ' + emptyTextboxes.length);
});

JSFiddle： http://jsfiddle.net/r6jC7/1/

在Firefox，Chrome和＆amp; IE10 + JS只会计算已输入文本的文本框，无论其placeholder值如何。在IE9及更低版本中，您将始终看到消息“Num empty text-boxes：0”，因为浏览器似乎在计算占位符。

我的问题：

有没有一种方法可以更新/更改我的jQuery选择器，IE8和IE9的行为与现代浏览器类似？

jQuery版本： 1.7.2

Answer 1

不幸的是，我不相信有直接选择器可以实现这一目标。但是，使用jQuery的过滤功能应该提供所需的结果集。

$('#b1').click(function () {
    var emptyTextboxes = $('input[name^="tb"]:visible');

    emptyTextboxes = emptyTextboxes.filter(function(index, el){ 
        return el.value == '' || el.value == el.getAttribute('placeholder');
    });

    alert('Num empty text-boxes: ' + emptyTextboxes.length);
});

Answer 2

value属性是jQuery与浏览器中实际发生的事件之间的一个不一致。您正在公开它，因为:visible强制选择器进入“jQuery模式”。

您可以根据HTML（:not([value])）中的内容进行选择，然后根据jQuery的优化进行过滤：

var emptyTextboxes = $('input[name^="tb"]:not([value])').filter(':visible');

Demo.但感觉有点脆弱。怎么样：

var emptyTextboxes = $('input[name^=tb]').filter(':visible').filter(function() {
    return !this.value;
});

这对<input>和<input value="">都有用。

用于计算空文本框数的jQuery选择器在IE9 / IE8中不起作用

HTML：

的JavaScript：

我的问题：

2 个答案: