8

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

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

5 回答 5

5

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

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

于 2012-12-21T01:24:00.297 回答
3

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

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

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

于 2012-12-21T01:40:47.770 回答
2

在我的脑海中，我想到了 Chrome 框架，这是一个将 Chrome 引擎置于 Trident 引擎盖下的谷歌项目。

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

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

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

于 2012-12-21T01:21:02.720 回答
2

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

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

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

于 2012-12-21T01:23:22.170 回答
0

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

于 2014-11-23T15:37:22.373 回答