Question

我尝试使用HTML5输入类型＆＃39;范围＆＃39;。 IE8和IE不支持此功能。 IE9被替换为类型＆＃39; text＆＃39;的输入。为了使这个字段适用于所有人，我使用polyfill输入类型＆＃39;范围＆＃39;。我使用的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">

在输入[type =＆＃34; range＆＃34;]上调用运行polyfill的javascript。例如：

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

如果你专门在输入元素上调用polyfill，而不是在具有某个类的元素上，polyfill只能正常工作。所以像下面这样调用它将不起作用（它将呈现，但范围的值不存储在输入元素中）：

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

但是，IE使用以下HTML替换DOM中的输入：

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

由于input元素现在具有不同的输入类型，因此选择器$（＆＃39;输入[type =＆＃34; range＆＃34;]＆＃39;）将不起作用。使用class或id作为选择器似乎也不起作用（在这种情况下，polyfill不会更新原始元素的值）

在其他浏览器（Firefox，Chrome）中，polyfill似乎有效（当我让它覆盖原生支持时）。

问题： 如何在IE9中使用此polyfill（使用哪个元素选择器）？

Answer 1

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

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

Answer 2

我遇到了同样的问题。

我发现当我没有尝试使用type=range选择但使用我添加到input元素的类时，语法更简单，这对我有用，例如：

<input type="range" class="slider" />

和

$('input[class=slider]').rangeslider();

使用polyfill输入类型＆＃39;范围＆＃39;在IE9中

2 个答案: