Is it possible to run some HTML5 input types in IE

问题:

Is it possible to run some HTML5 input types in IE8 with any library??
for example with range.

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

回答1:

You can use modernizr To check if your browser supports HTML5.
And you could use Jquery UI Slider it work in IE8

Check this page : http://jqueryui.com/slider/
demo: http://jsbin.com/eduren/1/edit

To read slider value/percentage value:
var val = $('#slider').slider("option", "value");

回答2:

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.

This page has 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.

回答3:

Right of my mind I think of Chrome frame, a Google project to bring Chrome engine under Trident hood.

URL: 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 modernizr library 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 shiv could be a way to find your way out. And that's the second option I prefer when dealing with IE8. Regards.

回答4:

Ie8 will render all "html5" input types as text. However you can then target those types with JavaScript, using something like

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

I know it isn't tagged jquery, but I figure the example is still clear enough

回答5:

Use this code for a range input that works in all versions of IE and in all HTML5-browsers:

<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">&nbsp;&nbsp;</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]-->