Можно ли запускать некоторые типы ввода HTML5 в IE8?

Можно ли запускать некоторые типы ввода HTML5 в IE8 с какой-либо библиотекой??
например, с диапазоном.

Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">

Community 21.12.2012 источник

comment

Вы можете поместить это в IE8 и убедиться сами. - DA. 21.12.2012

comment

Вы знаете какой-нибудь эмулятор IE8?? Я пробовал с IEtester, и не работает тип ввода = 'диапазон' - 21.12.2012

comment

Он отображается как текстовое поле в IE8. Что довольно ожидаемо. Не ждите, что IE8 будет широко поддерживать HTML5. - DA. 21.12.2012

Ответы (5)

arrow_upward
3
arrow_downward

Вы можете использовать modernizr, чтобы проверить, поддерживает ли ваш браузер HTML5.
И вы можете использовать Jquery UI Slider, он работает в IE8.

Проверьте эту страницу: http://jqueryui.com/slider/
демо: http://jsbin.com/eduren/1/edit

Чтобы прочитать значение ползунка/процентное значение:
var val = $('#slider').slider("option", "value");

Kakitori 21.12.2012

arrow_upward
5
arrow_downward

IE8 не поддерживает <input type="range">. Самый простой способ добиться этого в старых браузерах — обнаружить поддержку и использовать «полифиллы» там, где это необходимо. Полифил предназначен для поддержки старых браузеров, обычно использующих JavaScript, который пытается эмулировать собственное поведение.

На этой странице есть большой список полифиллов. (И Modernizr — отличный способ обнаружить поддержку подобных вещей.) В этом списке вы найдете полифиллы для различных типов ввода.

Michael Mior 21.12.2012

arrow_upward
2
arrow_downward

На мой взгляд, я думаю о фрейме Chrome, проекте Google, который поместит движок Chrome под капот Trident.

URL: http://www.google.com/chromeframe.

Я никогда не пробовал себя. Когда в браузере возникает ошибка, мы исправляем ее или находим обходной путь. Я не большой поклонник дополнений, особенно с точки зрения администрирования.

Другой вариант — использовать библиотеку modernizr, чтобы определить возможности браузера и найти обходной путь. Всегда есть какой-то хакерский способ выбраться. Использование html5 shiv может помочь найти выход. И это второй вариант, который я предпочитаю при работе с IE8. С уважением.

happy 21.12.2012

arrow_upward
2
arrow_downward

IE8 будет отображать все типы ввода «html5» как текст. Однако затем вы можете ориентироваться на эти типы с помощью JavaScript, используя что-то вроде

$('[type=range]').slider() //insert your favorite library here...

Я знаю, что это не тег jquery, но я думаю, что пример все еще достаточно ясен

BLSully 21.12.2012

arrow_upward
0
arrow_downward

Следующий код создает ввод диапазона, а затем проверяет, является ли браузер версией Internet Explorer, которая не поддерживает ввод диапазона. Если это так, он создает входной диапазон из div и использует некоторый код Javascript, чтобы сделать его интерактивным.

<input name="range" id="range" type="range" min="1" max="10" />
<!--[if lt IE 10]>
  <div id="range_ie" style="position:relative; width:255px; height:15px; font-size:0px; cursor:default" onselectstart="return false">
    <div style="position:absolute; left:0px; top:5px; width:100%; height:30%; border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid white; border-bottom:1px solid white; background:silver"></div>
    <div id="slider" style="position:absolute; left:0px; top:0px; width:5px; height:100%; border:1px solid gray; background:#EBEBEB; font-size:15px" onmousedown="document.onmousemove=changevalue">&nbsp;&nbsp;</div>
  </div>
  <script type="text/javascript">
    //Hide the <input> element, otherwise older versions of IE will just display it as a text input
    document.getElementById("range").style.display = "none";

    //If the user releases the mouse after changing the value of the range input, it should stop changing
    document.body.onmouseup = function() {
      document.onmousemove = function(){};
    };

    function changevalue(e) {
      //Get the value of the input from the position of the cursor
      range.value = ((navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x) * (range.max - range.min) / (document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) + Number(range.min);

      //Check that the value isn't out of bounds
      if (Number(range.value) > Number(range.max)) {
        range.value = range.max;
      }
      if (Number(range.value) < Number(range.min)) {
        range.value = range.min;
      }

      //Move the slider to its new position
      document.getElementById("slider").style.left = (range.value - range.min) * Number(document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) / (Number(range.max) - Number(range.min)) + "px";
    }

    //If we click on the slider just like that, it should move
    document.getElementById("range_ie").onclick = changevalue;
  </script>
<![endif]-->

Donald Duck 23.11.2014