Использование полифилла для типа ввода «диапазон» в IE9

Я пытаюсь использовать «диапазон» типа ввода HTML5. Это не поддерживается в IE8 и IE9 и заменяется вводом с типом «текст». Чтобы это поле работало для всех, я использую полифилл для ввода с типом «диапазон». Полифил, который я использую: 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">

JavaScript, который запускает полифилл, вызывается на input[type="range"]. Пример:

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

Почему-то полифил работает корректно только в том случае, если вызывать его именно на элемент ввода, а не на элемент с определенным классом. Поэтому вызов, как показано ниже, не будет работать (он будет отображаться, но значение диапазона не сохраняется в элементе ввода):

$('.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"]') не будет работать. использование класса или идентификатора в качестве селектора также не работает (в этом случае полифилл не обновляет значение исходного элемента)

В других браузерах (Firefox, Chrome) полифилл, кажется, работает (когда я позволяю ему переопределять встроенную поддержку).

Вопрос: как использовать этот полифилл (с каким селектором элементов) в IE9?


javascript html internet-explorer polyfills
person Maisnon    schedule 27.11.2014    source источник
comment
А как насчет $('input[name=somefield]').rangeslider()?   -  person SaminOz    schedule 27.11.2014
comment
Спасибо, кажется, это работает! Я пробовал это с помощью $('input[class=className]').rangeslider(), однако это не сработало. Использование имени работает нормально. Чтобы заставить это работать для всех полей ввода диапазона, теперь я могу просто написать функцию, которая сначала находит все элементы с определенным классом, а затем получает имена этих элементов для использования этого селектора.   -  person Maisnon    schedule 27.11.2014

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел ошибку. Можно использовать класс как селектор. Вот фрагмент кода, который вызывает полифиллы для нескольких полей ввода диапазона. Это позволяет избежать использования типа ввода в качестве селектора и работает во всех браузерах. Также это работает для нескольких полей на одной странице.

    $('input.className').each(function(e) {
      $(this).rangeslider();
    });
person Maisnon    schedule 27.11.2014

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой.

Я обнаружил, что это будет работать для меня с более простым синтаксисом, когда я не пытался выбирать с помощью type=range, а использовал класс, который я добавил к элементам input, например:

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

а также

$('input[class=slider]').rangeslider();
person sync    schedule 25.02.2015