是否可以在IE8中运行一些HTML5输入类型

Question

是否可以使用任何库中的IE8中运行一些HTML5输入类型？
例如范围。

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

Answer 1

IE8不支持<input type="range">。在较旧的浏览器中实现这一目标的最无缝的方法是在需要时检测支持并使用"多填充"。多文件旨在为较旧的浏览器添加支持，通常使用一些试图模拟天然行为的JavaScript。

此页面上有一个很好的综合列表。（现代化是检测对这些事物的支持的好方法。）您将在该列表中找到各种输入类型的多填充。

Answer 2

您可以使用Modernizr检查您的浏览器是否支持HTML5。
而且您可以使用jQuery UI滑块，它可以在IE8

中使用

检查此页面：http：//jqueryui.com/slider/
演示：http：//jsbin.com/eduren/1/edit

读取滑块值/百分比值：
var val = $（'＃slider'）。slider（" option"，" value"）;

Answer 3

我想到的是Chrome Frame，这是一个Google项目，将Chrome Engine带到Trident Hood下。

url：http：//www.google.com/chromeframe

我从未尝试过。当浏览器遇到错误时，我们将其修复或找到解决方法。我不是附加组件的忠实拥护者，尤其是从管理角度来看。

另一个选择是使用ModernIzr库来检测浏览器功能并为其找到工作。总是有一些骇人听闻的方法来解决您的出路。使用HTML5 SHIV可能是找到出路的一种方式。这是我在处理IE8时更喜欢的第二个选择。问候。

Answer 4

ie8将呈现所有" html5"输入类型作为文本。但是，您可以使用

之类的javaScript来定位这些类型

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

我知道它不是标记的jQuery，但我认为该示例仍然足够清楚

Answer 5

以下代码创建范围输入，然后检查浏览器是否是不支持范围输入的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]-->