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

【问题标题】：HTML5 input type date, color, range support in Firefox and Internet ExplorerFirefox 和 Internet Explorer 中的 HTML5 输入类型日期、颜色、范围支持
【发布时间】：2012-09-09 10:44:48
【问题描述】：

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

在谷歌浏览器中一切正常。

但是当我打开 Internet Explorer 和 Firefox 时，所有输入字段都变成 input 类型 text。

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

【问题讨论】：

你在用什么doctype？
我使用这个文档类型 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我发现了一个类似的帖子stackoverflow.com/questions/3269004/…
html5 doctyp 应该是<!DOCTYPE html>
firefox 现在支持颜色类型..

标签： html internet-explorer firefox cross-browser

【解决方案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。

【讨论】：

感谢您的回复。我在法国网站上找到了一种方法。 41mag.fr/… 问题是我又遇到了一些麻烦。但是这个帖子还可以。感谢您的帮助。
这是可行的解决方案：zeeshanarshad.com/…

【解决方案2】：

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

【讨论】：

【解决方案3】：

我认为最好的解决方案是使用 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/

【讨论】：

【解决方案4】：

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

支持范围小部件

火狐桌面 23

Opera 桌面

Chrome 桌面

Chrome 移动版

IOS Safari 5

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

火狐桌面 29

Opera 桌面 11

Chrome 桌面 20：

Android 4.4 / Chrome 移动版：

Opera 移动版：

黑莓：

火狐操作系统 1.3

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

如果你想要你可以使用这个http://www.eyecon.ro/colorpicker/

【讨论】：

哇，感谢您不厌其烦地在不同设备上发布所有这些屏幕截图 :)
如果您的应用需要 IE？包含任何简单的库吗？
你 cpuld 回退到 jquery ui