logo标签列表

火狐和IE支持HTML5输入类型日期、颜色和范围吗？

htmlinternet-explorerfirefoxcross-browser
26

我使用HTML5构建了所有网站，其中包含各种形式的表单（使用input类型date, color, 和 range）。

在Google Chrome中一切运作正常。

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

是否有一种方法或脚本可以强制正确显示这些输入？

你使用的doctype是什么？ - Muthu Kumaran
我使用这个文档类型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。 - Stanislas Piotrowski
我找到了一个类似的帖子https://dev59.com/UHA75IYBdhLWcg3wfpGr - Muthu Kumaran
1
HTML5的文档类型应该是 <!DOCTYPE html>。 - frogstarr78
现在Firefox已经支持颜色类型了。 - Moax6629
4个回答
37
感谢您的回复。我在一个法语网站上找到了解决方法。http://41mag.fr/tutoriel-html5-comment-faire-un-formulaire-complet.html 问题是我又遇到了一些麻烦。但这篇文章很好。谢谢您的帮助。 - Stanislas Piotrowski
这是可行的解决方案：http://www.zeeshanarshad.com/how-to-get-firefox-html-5-date-input-andor-ie-10/ - ZEESHAN ARSHAD
6

如果特殊输入缺失，所有浏览器都会回退到文本输入类型。这一切都与小部件和验证有关。

以下支持范围小部件

Firefox桌面版23

Firefox 29

Opera桌面版

Opaera

Chrome桌面版

chrome desktop

Chrome移动版

Chrome mobile

IOS Safari 5

IOS Safari 5

.

.

.

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

Firefox Desktop 29

Firefox 29 color input Ubuntu

Opera桌面版11

Opera desktop color input

Chrome桌面版20：

chrome input type color Ubuntu

安卓4.4 / Chrome移动版：

chrome mobile color input

Opera移动版：

opera mobile color input

黑莓：

blackberry color input

Firefox OS 1.3

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

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

哇，感谢您费心在不同设备上发布所有这些屏幕截图 :) - hypervisor666
如果你的应用程序需要IE怎么办？有没有简单的库可以包含？ - whyoz
你可以回退到使用jQuery UI。 - aWebDeveloper
1
我曾经遇到一个与input type=range有关的类似问题。在除Internet Explorer 10之外的所有浏览器中，一切正常。鉴于我可以在其他网站上看到滑块，这不是Internet Explorer的问题。解决方法是关闭我的网站的ie兼容性视图。
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接