HTML5 日期选择器仅在第二次点击时打开

Posted 2023-05-07

【中文标题】HTML5 日期选择器仅在第二次点击时打开

【英文标题】：HTML5 Date picker opens up only on 2nd click

【发布时间】：2014-10-26 09:35:57

【问题描述】：

我正在为我的日期日历日期框使用 html5 日期选择器 (input type="date")。但是在 Nexus 7 Chrome 36 和 Motorolla Chrome 33 中，我发现，我们需要点击日期框两次才能打开日期选择器。背后的原因是什么？这个问题怎么解决？

【问题讨论】：

大家的任何帮助将不胜感激！我在这里束手无策。有什么建议吗？

你能用jsfiddle.net/y3ozjjbt 重现这个吗？您是否在 input 元素上使用了任何其他属性？你有任何附加到这个元素的 JS 事件吗？

@lxg ：这无法在桌面浏览器中正确复制。您需要在我提到的移动设备的 chrome 浏览器版本中打开 jsfiddle。只有这样才能复制。目前输入没有js事件。这里要注意的一点是：当我在我的 LAVA Qpad 中打开它时：Chrome 33，它在单击时可以正常工作。在三星、摩托罗拉和 Droid chrome 版本上，如果该字段为空，它只能在双击时起作用。如果该字段具有日期值，则单击即可使用。

作为一种解决方法，您是否可以始终为该字段提供初始（可能为 null）值？

@scottt：让我试试。我试过后会告诉你的。

【参考方案1】：

看起来 HTML5 日期选择器仅受部分支持。也许随着支持的改进，这个问题会消失？

http://caniuse.com/#feat=input-datetime

【参考方案2】：

由于输入如此之少，唯一可能的解释是，当您打开网页时，它会被缩小。默认情况下，当您在页面缩小时触摸任何输入元素时，android会放大该区域，您需要再次触摸以确认您触摸的内容。

要摆脱它，您可以在触摸之前简单地放大，或者只是使用 jQuery mobile 或其他东西构建一个特定于移动设备的网站......

【参考方案3】：

默认的 HTML5 日期选择器可能与您正在使用的另一个库发生冲突。根据html5test，默认日期支持您的浏览器。我希望您正在使用实际设备进行测试。你能尝试一个只有< input type="date" />的简单页面

【讨论】：

是的，我已经用实际设备进行了测试。问题仍然存在，但在 34,35 和最近播放商店版本 37 等其他 chrome 版本中，除了那些特定设备的其他 chrome 版本之外，我找不到任何问题。