在不支持它们的浏览器中查找页面上的所有 <input type="number">答案

【问题标题】：Find all the <input type="number"> on a page in a browser that doesn't support them在不支持它们的浏览器中查找页面上的所有 <input type="number">
【发布时间】：2013-06-13 18:55:25
【问题描述】：

我想为不支持 <input type="number"> 的旧浏览器编写一个 shim。

这很容易检测到，因为在这些浏览器中，任何将type 设置为number 的input 都会将type 报告为text。到目前为止一切顺利。

所以我想做的是找到每个<input type="number"> 并为这些旧浏览器连接事件。

问题是：我如何找到它们？

$('input[type=number]').length === 0（当然）。
$('input[name=aKnownNumberField]')[0].type === 'text'，这并不奇怪，因为这是首先用于特征检测的检查。
$($('input[name=aKnownNumberField]')[0]).parent().html().indexOf('type="number"')（或对 HTML 的任何类似检查）也会失败，因为返回的 HTML 将根据浏览器的 DOM。

请注意，我在示例中使用了 jQuery，但我很高兴得到非 jQuery 答案。

如何在不支持它们的浏览器中检测<input type="number">？

【问题讨论】：

document.querySelectorAll("input[type='number']")
@Cherniv querySelectorAll 不支持 Keith 尝试定位的浏览器。
您介意在元素上添加一个额外的属性...比如data-input-type="number"吗？然后您可以通过$('input[data-input-type="number"]') 获取它们
@Cherniv 很多不支持<input type="number"> 的浏览器也支持don't support querySelectorAll。例如它在 IE6 或 IE7 中不起作用
@Ian 我可以。标记样式也是一种选择，但我真的在寻找一种 shim/polyfill，我可以将其添加到我的全局 JS 中，而无需编辑每个页面。

标签： javascript html html-input polyfills shim

【解决方案1】：

如果您使用的是 jQuery，您可以使用 .filter() 获取它们：

var $unsupported = $('input').filter(function() {
    return this.type !== $(this).attr('type');
});

这将选择所有个不受支持的输入，因此您可能希望使用.filter('[type="number"]') 进一步过滤或在过滤函数中进行过滤。

纯 JS 解决方案并没有太大的不同：

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === inputs[i].getAttribute('type')) {
        continue;
    }

    // inputs[i] isn't supported by the browser
}

还有一个演示：http://fiddle.jshell.net/PENRD

我在 IETester 中对其进行了测试，它可以运行到 IE6。

【讨论】：

嗯，它似乎在旧 IE 中可以工作，但在旧模式下的 IE9 或 10 中不起作用 - 在 IE10 中作为 IE7 失败，在 IE7 中它可以工作。可爱的：-S
@Keith 我发现很多东西不适用于 IE10 和兼容模式......这很痛苦

【解决方案2】：

$.expr[':'].realtype = function(objNode,intStackIndex,arrProperties,arrNodeStack)
{
  return $(objNode).attr('type')===arrProperties[3];
}

var numbers=$('input:realtype("number")');

jsfiddle：http://jsfiddle.net/kingmotley/3sMQf/2/

【讨论】：