javascript - 在 IE9 中对输入类型 'range' 使用 polyfill

Question

我正在尝试使用 HTML5 输入类型“范围”。这在 IE8 和 IE9 中不受支持，并被类型为“文本”的输入所取代。为了让这个字段对每个人都有效，我对类型为“range”的输入使用了一个 polyfill。我使用的 polyfill 是:Rangeslider.js ( http://andreruffert.github.io/rangeslider.js/ )

我输入框的 html 是这样的:

<input type="range" id="somefield" name="somefield" required="required" min="0" max="100" step="1" class="className"  value="10">

运行 polyfill 的 javascript 在 input[type="range"] 上被调用。示例:

$('input[type="range"]').rangeslider();

不知何故，只有在输入元素上专门调用 polyfill，而不是在具有特定类的元素上调用它，polyfill 才能正常工作。所以像下面这样调用它是行不通的(它会呈现，但范围的值不存储在输入元素中):

$('.className').rangeslider();

但是，IE 将 DOM 中的输入替换为以下 HTML:

<input name="somefield" class="className" id="somefield" required="required" type="text" min="0" max="100" step="1" value="10">

因为输入元素现在具有不同的输入类型，所以选择器 $('input[type="range"]') 将不起作用。使用 class 或 id 作为选择器似乎也不起作用(在这种情况下，polyfill 不会更新原始元素的值)

在其他浏览器(Firefox、Chrome)中，polyfill 似乎确实有效(当我让它覆盖 native 支持时)。

问题:我如何在 IE9 中使用这个 polyfill(使用什么元素选择器)？

Answer 1

我发现了错误。可以使用类作为选择器。下面是一段代码，它为多个范围输入字段调用 polyfill。这避免了将输入类型用作选择器，并且似乎适用于所有浏览器。这也适用于一页上的多个字段。

    $('input.className').each(function(e) {
      $(this).rangeslider();
    });