如何在 iOS 上的 <input type=date> 上注册值更改事件

Posted 2023-03-14

【中文标题】如何在 iOS 上的 <input type=date> 上注册值更改事件

【英文标题】：How to register for value change events on <input type=date> on iOS

【发布时间】：2012-03-16 15:51:27

【问题描述】：

我正在尝试创建一个 html5 输入日期组件，以便我可以利用本机 ios 日期/时间选择器，并且我正在使用 jquery。我有以下代码来生成组件：

  var $inputDate = $("<input></input>");
  $inputDate.attr("type", "date");
  $inputDate.attr("value", "2004-05-03");
  $inputDate.change(function(event)
  
    console.log("value changed");
  );

代码在本机应用程序的 webkit 组件中运行。输入控件看起来很好，我可以使用选择器更改值。但是，当我更改值并关闭选择器时，不会触发更改功能。当我在 Chrome 的网页中运行它时，一切正常。如何在 iOS 上进行这项工作？

【问题讨论】：

发现其他用户抱怨没有触发更改事件，建议他们改用以下工具包：cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

感谢您的建议，但使用该工具包并不能提供我们产品所需的语言环境支持。

【参考方案1】：

关闭日期/时间选择器时会调用 onblur 函数。所以这确实有效：

var $inputDate = $("<input></input>");
$inputDate.attr("type", "date");
$inputDate.attr("value", "2004-05-03");
$inputDate.blur(function(event)

  console.log("value changed");
);

在较新版本的 Chrome（和 android 上的 Chrome）中：

选择日期时调用 onchange 事件 关闭下拉菜单时不会调用 onblur 事件，仅当控件失去键盘焦点时才会调用

这是一个示例，显示使用纯 javascript 生成的事件：http://jsbin.com/iximuy/4

【讨论】：

伙计，我把头发扯断了，谢谢你救了我！