在浏览器支持不可用的情况下,为 input type="date" 添加 javascript 回退

Posted

技术标签:

【中文标题】在浏览器支持不可用的情况下,为 input type="date" 添加 javascript 回退【英文标题】:Add javascript fallback for input type="date" where browser support is not available 【发布时间】:2014-02-15 07:19:50 【问题描述】:

向输入字段添加日期类型现在会生成一个基于浏览器的日期选择器。 (在支持的情况下)。

<input type="date"></input>

这对于触控设备来说太棒了……

当浏览市场的肉:Firefox 和 Internet Explorer 时,不支持键入日期。


问题

当支持不可用时,如何使用输入 type="date" 并回退到 javascript 日期选择器?

目前,如果不同时生成两个日期选择器,我似乎无法两全其美。

【问题讨论】:

不支持type=date的浏览器在通过JS查询时应该将类型报告为默认text ... 【参考方案1】:

您应该考虑使用modernizr,它使用 JS 来计算当前浏览器具有哪些功能。在下面的示例中,如果此浏览器不兼容,您可以提供另一个日期选择器:

<script src="modernizr.js"></script>
<script>Modernizr.load(
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () 
    $('input[type=date]').datepicker(
      dateFormat: 'yy-mm-dd'
    ); 
  
);
</script>

【讨论】:

这很好,可以解决问题。但是,如果可以避免的话,我会严格使用多余的代码。对于我想要实现的目标,这方面的开销很大。是否可以仅针对这一功能进行兼容性检查。 如果您只想将 YepNope 与 Modernizr.load 一起使用,您可以使用它。 modernizr.com/download/#-load 对于其他类型的输入、CSS 转换和 html5shiv,我倾向于使用 Modernizr 进行特征检测。这几乎是我构建的先决条件,所以我会再考虑包括更多的功能检测:) 谢谢@richieahb。我会更深入地研究它。 你还需要modernizr包中的输入检测,你可以在这个包modernizr.com/download/#-inputtypes-load找到它,它只有6kb。 请注意,'nope' 现在已被弃用,并且无法有条件地加载脚本等。您现在必须使用 jQuery 或其他工具来加载脚本(或者如果您不这样做,请始终加载它们'不关心速度较慢的页面)。【参考方案2】:

看看这个 polyfill:

https://github.com/chemerisuk/better-dateinput-polyfill

【讨论】:

后备脚本和类型检测器合二为一。日期选择器实际上比我开始使用的更小更好。非常感谢。 但是有很多依赖。 jQuery 是不够的。

以上是关于在浏览器支持不可用的情况下,为 input type="date" 添加 javascript 回退的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 - input=number 和不兼容的浏览器

HTTP 503 错误 – 服务不可用 (Service unavailable)

js解决IE89下placeholder的兼容问题

如何在不重新加载的情况下更改浏览器栏网址

input输入框的oninput和onchange事件

在IE需要保留在版本9的情况下,怎么浏览只支持IE10以上的网页