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

【问题标题】：Is it possible to run some HTML5 input types in IE8?是否可以在 IE8 中运行一些 HTML5 输入类型？
【发布时间】：2012-12-08 14:39:30
【问题描述】：

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

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

【问题讨论】：

你可以把它放在 IE8 中，自己看看。
你知道一些IE8模拟器吗？我尝试使用 IEtester，但输入类型='范围'
它在 IE8 中呈现为文本框。这有点太出乎意料了。不要指望 IE8 广泛支持 HTML5。

标签： javascript html internet-explorer cross-browser html-input

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 modernizr 来检查您的浏览器是否支持 HTML5。
你可以使用它在 IE8 中工作的 Jquery UI Slider

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

读取滑块值/百分比值：
var val = $('#slider').slider("option", "value");

【讨论】：

【解决方案3】：

IE8 不支持<input type="range">。在旧浏览器中实现这一点的最无缝方式是检测支持并在需要时使用“polyfills”。 polyfill 旨在添加对旧浏览器的支持，通常使用一些 JavaScript 来尝试模拟本机行为。

This page 有很多 polyfills。（Modernizr 是检测对这类事物的支持的好方法。）您会在该列表中找到各种输入类型的 polyfill。

【讨论】：

【解决方案4】：

Ie8 会将所有“html5”输入类型呈现为文本。但是，您可以使用 JavaScript 定位这些类型，使用类似

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

我知道它没有标记 jquery，但我认为这个例子仍然足够清楚

【讨论】：

【解决方案5】：

我想到了 Chrome 框架，这是一个将 Chrome 引擎置于 Trident 引擎盖下的 Google 项目。

网址：http://www.google.com/chromeframe

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

另一种选择是使用modernizr 库来检测浏览器功能并找到解决方法。总有一些 hacky 方法可以让您的出路。使用html5 shiv 可能是找到出路的一种方式。这是我在处理 IE8 时更喜欢的第二个选项。问候。

【讨论】：