如何禁用新的 Chrome HTML5 日期输入? [英] How can I disable the new Chrome HTML5 date input?
问题描述
Chrome 的最新更新 (V 20.x) 使用新的内置日期和时间输入类型破坏了我的一个表单.我在日期字段上调用 jQuery UI datepicker，它曾经在更新之前完美运行.更新后，Chrome 会覆盖我的占位符并使 jQuery UI 小部件无法使用.
The recent update (V 20.x) of Chrome has broken one of my forms with the new built-in date and time input type. I'm calling jQuery UI datepicker on a date field and it used to work perfectly prior to the update. After the update, Chrome overrides my placeholder and renders the jQuery UI widget unusable.
关于如何防止 Chrome 在不更改输入字段类型的情况下弄乱输入字段的任何想法?
Any ideas of how I can prevent Chrome from messing up with my input fields without changing their type?
推荐答案
您有几个不同的选择.
您可以通过嗅探用户代理字符串并阻止点击事件来检测用户正在使用 Chrome.
You could detect that the user is using Chrome by sniffing the user agent string and preventing click events.
if (navigator.userAgent.indexOf('Chrome') != -1) {
$('input[type=date]').on('click', function(event) {
event.preventDefault();
});
}
用户代理嗅探是个坏主意，但这会奏效.
在我看来，理想的方法是检测浏览器是否支持原生日期选择器，如果确实使用它，如果不使用 jQuery UI.
The ideal approach in my mind is to detect whether the browser supports a native datepicker, if it does use it, if not use jQuery UI's.
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
示例 - http://jsfiddle.net/tj_vantoll/8Wn34/
当然，由于 Chrome 支持原生日期选择器，用户会看到它而不是 jQuery UI.但至少您不会有功能冲突，并且用户界面将可供最终用户使用.
Of course since Chrome supports a native date picker the user would see that instead of jQuery UI's. But at least you wouldn't have a clash of functionality and the UI would be usable for the end user.
这引起了我的兴趣，所以我写了一些关于在本机控件旁边使用 jQuery UI 的日期选择器 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.
This intrigued me so I wrote up something about using jQuery UI's datepicker alongside the native control - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.
如果您有兴趣，我最近做了一个关于将 jQuery UI 的小部件与 HTML5 表单控件一起使用的演讲.
If you're interested, I recently gave a talk on using jQuery UI's widgets alongside HTML5 form controls.
这篇关于如何禁用新的 Chrome HTML5 日期输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
