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

Question

我有一个包含许多用户输入文本框的表单，所有文本框都设置了 placeholder 属性。要求用户填写所有具有特定模式的 name 属性值的文本输入。在提交表单时，我们使用 jQuery 选择器来查找/计算所有空输入(那些具有空 value 属性的输入)，以便我们可以突出显示这些 input 元素供用户填写。不幸的是，我发现 Internet Explorer 8 和 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 和 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);
});