Question

我使用HTML5的许多表单（使用input类型date，color和range构建了我的所有网站。）

Google Chrome中的一切正常。

但是当我启用Internet Explorer和Firefox时，所有输入字段都变为input类型text。

我可以下载一种方法或脚本来强制正确显示此输入吗？

Answer 1

由于HTML5尚未完全标准化，并非所有浏览器都支持这些输入类型。 预期的行为将回归<input type="text">。

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

您可以test for support使用Modernizr库或使用一些自定义JavaScript。如果您检测到某个HTML5功能不可用，则可以回退到JavaScript - based alternatives。

Answer 2

如果缺少特殊输入，所有浏览器都会回退到输入类型文本。它关于小部件和验证。

关注支持范围小部件

Firefox桌面23

Firefox 29

Opera Desktop

Opaera

Chrome桌面

chrome desktop

Chrome Mobile

Chrome mobile

IOS safari 5

IOS Safari 5

以下浏览器现在支持颜色小部件

Firefox Desktop 29

Firefox 29 color input Ubuntu

Opera Desktop 11

Opera desktop color input

Chrome桌面20：

chrome input type color Ubuntu

Android 4.4 / Chrome Mobile：

chrome mobile color input

Opera mobile：

opera mobile color input

黑莓：

blackberry color input

Firefox os 1.3

Firefox OS现在支持颜色输入，但我仍然没有屏幕截图

如果您想要，可以使用此http://www.eyecon.ro/colorpicker/

Answer 3

输入类型=范围我遇到了类似的问题。一切都在所有浏览器上工作，除了Internet Explorer 10.因为我可以在其他网站上看到滑块，所以Internet Explorer不是问题。解决方案是关闭我的网站的兼容性视图。

Answer 4

我认为最好的解决方案是使用jquery插件。

<!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/

Firefox和Internet Explorer中的HTML5输入类型日期，颜色，范围支持

4 个答案: