是否有可能在IE8中运行一些HTML5输入类型？

Question

有没有任何库可以在IE8中运行一些HTML5输入类型？例如range。

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

- user1907121

---

你可以把它放到IE8中自己看看。 - DA.

你知道一些IE8模拟器吗？我尝试了IEtester，但无法使用input type='range'。 - user1907121

它在IE8中呈现为文本框。这是可以预料的。不要指望IE8广泛支持HTML5。 - DA.

Answer 1

IE8不支持<input type="range">。在旧版浏览器中实现此功能的最无缝方法是检测支持并在需要时使用"polyfills"。Polyfill旨在为旧版浏览器添加支持，通常使用一些JavaScript来模拟本地行为。

这个页面有一个很好的polyfill列表。（而Modernizr是检测此类事物支持的好方法）您将在该列表中找到各种输入类型的polyfills。

- Michael Mior

Answer 2

你可以使用Modernizr来检查你的浏览器是否支持HTML5.
同时，你还可以使用Jquery UI Slider在IE8中工作。 请参考以下页面：http://jqueryui.com/slider/ 演示: http://jsbin.com/eduren/1/edit 要读取滑块值/百分比值： var val = $('#slider').slider("option", "value");

- Kakitori

Answer 3

Ie8将把所有“html5”输入类型呈现为文本。但是，您可以使用JavaScript来针对这些类型进行定位，例如：

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

我知道这段代码没有标记为jQuery，但我认为示例仍然足够清晰。

- BLSully

Answer 4

我想起了Chrome Frame，这是谷歌的一个项目，将Chrome引擎嵌入到Trident中。

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

我自己从未尝试过。当浏览器遇到问题时，我们会修复它或找到解决方法。我不太喜欢使用插件，特别是从管理角度考虑。

另一个选择是使用modernizr库来检测浏览器的能力，并找到相应的解决方法。总有一些巧妙的方法可以解决问题。使用html5 shiv可能是解决IE8问题的一种方法。以上是我处理IE8问题时喜欢采用的第二个选项。祝好！

- happy

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]-->

- Donald Duck