jQuery選擇器計數空文本框的數量在IE9 / IE8中不起作用

Question

我有一個帶有許多用於用戶輸入的文本框的表單，所有這些文本框都設置了placeholder屬性。 要求用戶填寫所有具有特定name屬性值模式的文本輸入。 在表單提交時，我們使用jQuery選擇器來查找/計算所有空輸入（具有空value屬性的input ），以便我們突出顯示這些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 +中，無論placeholder值是多少，JS只會計算在其中鍵入了文本的文本框。 在IE9及以下版本中，您總是會看到消息“ Num empty text-boxes：0”，因為瀏覽器似乎在計算占位符。

我的問題：

有沒有一種方法可以使IE8和IE9與現代瀏覽器的行為類似的方式來更新/更改jQuery選擇器？

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');

演示。 不過，這感覺有點脆弱。 怎么樣：

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

這對<input>和<input value=""> 。