javascript 是否可以在 IE8 中运行某些 HTML5 输入类型？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13982973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to run some HTML5 input types in IE8?
提问by
Is it possible to run some HTML5 input types in IE8 with any library??
for example with range.
是否可以使用任何库在 IE8 中运行某些 HTML5 输入类型？
例如范围。
Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">
采纳答案by Kakitori
You can use modernizr To check if your browser supports HTML5.
And you could use Jquery UI Slider it work in IE8
您可以使用 modernizr 来检查您的浏览器是否支持 HTML5。
你可以使用 Jquery UI Slider 它在 IE8 中工作
Check this page : http://jqueryui.com/slider/
demo: http://jsbin.com/eduren/1/edit
检查此页面：http: //jqueryui.com/slider/
演示：http: //jsbin.com/eduren/1/edit
To read slider value/percentage value:
var val = $('#slider').slider("option", "value");
读取滑块值/百分比值：
var val = $('#slider').slider("option", "value");
回答by Michael Mior
IE8 doesn't support <input type="range">. The most seamless way to accomplish this in older browsers is to detect support and use "polyfills" where needed. A polyfill is designed to add support to older browsers, typically using some JavaScript that tries to emulate what the native behaviour would be.
IE8 不支持<input type="range">. 在旧浏览器中实现这一点的最无缝方式是检测支持并在需要时使用“polyfills”。polyfill 旨在增加对旧浏览器的支持，通常使用一些 JavaScript 来尝试模拟本机行为。
This pagehas a great list of polyfills. (And Modernizr is a great way to detect support for these sorts of things.) You'll find polyfills for various input types in that list.
这个页面有一个很好的 polyfills 列表。（而 Modernizr 是检测对此类事物的支持的好方法。）您会在该列表中找到各种输入类型的 polyfill。
回答by happy
Right of my mind I think of Chrome frame, a Google project to bring Chrome engine under Trident hood.
我想到了 Chrome 框架，这是一个将 Chrome 引擎置于 Trident 引擎盖下的 Google 项目。
URL: http://www.google.com/chromeframe
网址：http: //www.google.com/chromeframe
I never tried myself. When a browser experience a bug, we fix it or find a workaround. I'm not a big fan of add-on, especially from an administration point-of-view.
我自己从来没有尝试过。当浏览器遇到错误时，我们会修复它或找到解决方法。我不是附加组件的忠实粉丝，尤其是从管理的角度来看。
Another option would be to use modernizrlibrary to detect the browser capability and find a work around for it. There is always some hacky way to get your way out. Using html5 shivcould be a way to find your way out. And that's the second option I prefer when dealing with IE8. Regards.
另一种选择是使用Modernizr库来检测浏览器功能并找到解决方法。总有一些骇人听闻的方法可以让您摆脱困境。使用html5 shiv可能是一种找到出路的方法。这是我在处理 IE8 时更喜欢的第二个选项。问候。
回答by BLSully
Ie8 will render all "html5" input types as text. However you can then target those types with JavaScript, using something like
IE8 会将所有“html5”输入类型呈现为文本。但是，您可以使用 JavaScript 定位这些类型，使用类似
$('[type=range]').slider() //insert your favorite library here...
I know it isn't tagged jquery, but I figure the example is still clear enough
我知道它没有标记 jquery，但我认为这个例子仍然足够清楚
回答by Donald Duck
Use this code for a range input that works in all versions of IE and in all HTML5-browsers:
将此代码用于适用于所有 IE 版本和所有 HTML5 浏览器的范围输入：
<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" onclick="changevalue()" 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"> </div>
</div>
<script type="text/javascript">
window.document.getElementById("range").style.display = "none";
document.body.onmouseup = function(){document.onmousemove = function(){void(0)}};
function changevalue(){
range.value = ((navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x) * (eval(range.max) - eval(range.min))/eval(window.document.getElementById("range_ie").style.width.substring(0,window.document.getElementById("range_ie").style.width.search("px"))) + eval(range.min);
if(range.value > eval(range.max)){range.value = range.max}
if(range.value < eval(range.min)){range.value = range.min}
window.document.getElementById("slider").style.left = (range.value - eval(range.min)) * eval(window.document.getElementById("range_ie").style.width.substring(0,window.document.getElementById("range_ie").style.width.search("px")))/(eval(range.max) - eval(range.min)) + "px";
}
</script>
<![endif]-->
