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

问题

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

Everything works fine in Google Chrome.

But when I turn on Internet Explorer and Firefox, all input fields become like input type text.

Is there a way or a script I can download to make forcing the displaying of this input correctly?

回答1:

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.

回答2:

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/

回答3:

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.

回答4:

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/

来源：https://stackoverflow.com/questions/12455506/html5-input-type-date-color-range-support-in-firefox-and-internet-explorer

标签

html5

internet-explorer

firefox

cross-browser