html5的input date在手机中怎么侦听用户点击输入完成的按钮?

发布于 2022-09-02 09:37:29 字数 476 浏览 15 评论 0

在iOS和安卓自带浏览器里面,点击input date是会弹出一个弹窗让用户输入日期的,而且都会有个确定按钮(iOS里面叫“完成”,android里面叫“设置”按钮),怎么侦听这个按钮的点击事件?

还有,我用input标签的max和min属性不能设置这个input date的可设置范围吗?


第一个问题我刚刚发现用onchange事件就行了。(安卓此时需要点击确定按钮才会触发,iOS则每改变一个日期,不需要点击确定都会触发。)

但是max和min还是没效果,值是不是有固定的格式?用精确到毫秒的时间戳不行,用2016-02-26这种格式的字符串也不行。

@AlanZhang 提到的onbluronfocusout在iOS中是可以做到点击“完成”按钮后触发的,有需求的同学可以使用hack

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

朮生 2022-09-09 09:37:29

多测了下, android 的 Chrome 用下面两个不行。题主说 onchange 可以,我就不折腾了~

onbluronfocusout 事件都可以满足你的要求,具体参考该链接 HTML DOM Events 的 Form Events 部分,


可以设置范围,具体参考该链接 HTML DOM Input Date Object 中的 Input Date Object Properties 部分对 max 和 min 属性的描述。


可能需要fq


补个例子:http://jsfiddle.net/c8tdoLee/embedded/

拿手机浏览器看这个就是你要的结果。

图片描述

挽清梦 2022-09-09 09:37:29

外面套表单。。监听submit事件

筱果果 2022-09-09 09:37:29

就前端而言,如果你要给一个按钮添加点击事件,直接click就可以了,至于你设置input标签的max和min属性没起作用(你是这个意思吧?),你要看你是不是设置对了,要看你是什么属性,有些标签是没有一些属性

天邊彩虹 2022-09-09 09:37:29

我表示onchange事件在安卓无效

淡水深流 2022-09-09 09:37:29

实在不行自己找个日历插件用。。。

牵你的手,一向走下去 2022-09-09 09:37:29

angular 有ng-change

山色无中 2022-09-09 09:37:29

blur在安卓机无法监听点击完成,只能完成之后再点击其他地方才会触发,安卓机有没有方法监听,使用onchange只能数据变了才能触发

森末i 2022-09-09 09:37:29

我用的是vue(相应的ng和react应该都可以可实现问题的解决方案)

第一个问题可以使用data绑定。把data绑定到input中,然后用watch去监听。

第二个问题我用直接写了个方法去判断的、暂时没有解决方案。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文