HTML5 input type date, color, range support in Firefox and Internet Explorer

前端未结

关注

 4  443

醉酒成梦

I\'ve build all my website using many forms with HTML5 (using the input types date, color and range.)

Everything

相关标签:

4条回答

庸人自扰

2020-12-08 20:39

All browsers fallback to input type text if special input is missing. Its all about widgets and validation.

Following support range widget

Firefox Desktop 23

Opera Desktop

Chrome Desktop

Chrome Mobile

IOS safari 5

.

.

.

Following browsers now supports color widget

Firefox Desktop 29

Opera Desktop 11

Chrome Desktop 20:

Android 4.4 / Chrome Mobile :

Opera mobile:

Blackberry:

Firefox os 1.3

Firefox os now supports color input but i still don't have a screen shot

If u want u can use this http://www.eyecon.ro/colorpicker/

0 讨论(0)
发布评论:

提交评论
- 加载中...
旧巷少年郎

2020-12-08 20:41

Since HTML5 hasn't been completely standardized yet, not all browsers do support these input types. The intended behaviour is to fall back to <input type="text">.

↪ See here for more information on browser support for HTML5 input types.

You can test for support using the Modernizr library or with some custom JavaScript. If you detect a certain HTML5 feature isn't available, you can fall back to JavaScript-based alternatives.

0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-12-08 20:48

I had a similar problem with input type=range. Everything was working on all browser, except for Internet Explorer 10. It was not a problem with Internet Explorer, given that I could see the slider in other websites. The solution was to turn off i.e. compatibility view for my website.

0 讨论(0)
发布评论:

提交评论
- 加载中...

醉梦人生

2020-12-08 20:50

the best solution I think is to use jquery plugins.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


    </body>

</html>

http://jqueryui.com/slider/

0 讨论(0)