Knockout JS：iPad 上的 HTML5 日期未触发更改事件
我正在使用 Knockout JS 库在我的 Web 应用程序中绑定 HTML5 输入控件，该应用程序旨在在 iPad（iOS5、Safari 5.1）上运行。该绑定适用于文本和选择等输入类型，但不适用于日期。通过日期选择器选择日期值后，该值不会绑定到 viewModel 属性（实际上没有保存）。
这就是我的 HTML 的样子。
<input id="dob" name="dob" type="date" data-bind="value: dob" />
我尝试使用自定义绑定来初始化更改事件处理程序。
ko.bindingHandlers.datePicker = {
init: function (element, valueAccessor) {
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
}
};
将 HTML 代码更改为 -
<input id="dob" name="dob" type="date" data-bind="datePicker: dob" />
奇怪的是，即使该事件也没有触发。请注意，在这两种情况下，绑定都可以在 Windows XP 的 Opera 和 Safari 浏览器上完美地进行。
最终，我通过在自定义绑定中使用“模糊”事件而不是“更改”来解决问题。现在正在调用事件处理程序，并且我正在手动设置日期控件中的值。
现在我的问题是，我是否做得不正确，如果没有，那么为什么 HTML5 日期控件的更改事件没有触发，无论是默认情况下还是通过自定义绑定？我希望日期控件能够按预期工作。
I am using Knockout JS library to bind the HTML5 input controls in my Web application which is intended to run on iPad (iOS5, Safari 5.1). The binding works fine for the input types like text and select but not for date. After selecting a date value through the datepicker the value is not getting bound to the viewModel property (in effect not getting saved).
This is how my HTML looks.
<input id="dob" name="dob" type="date" data-bind="value: dob" />
I tried to work around with a custom binding where I initialized a change event handler.
ko.bindingHandlers.datePicker = {
init: function (element, valueAccessor) {
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
}
};
Changing the HTML code to -
<input id="dob" name="dob" type="date" data-bind="datePicker: dob" />
Strangely, even that event is not firing. Please note that in both of the scenarios the binding happens perfectly in Windows XP on Opera and Safari browsers.
Ultimately, I got the solution to my problem by using the 'blur' event instead of 'change' in the custom binding. Now the event handler is being called and I am manually setting the value from the date control.
Now my question is, is it something that I am not doing correctly and if not then why doesn't the change event of the HTML5 date control not fire, whether by default or through custom binding? I want the date control to work as it is supposed to.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
从淘汰赛的角度来看，你没有做任何错事。从我通过测试和研究来看，这些事件实际上并没有被触发（即使在图片中也没有淘汰赛）。
您可以通过执行以下操作来避免自定义绑定：
You are not doing anything wrong from a Knockout perspective. Those events really just are not fired (without Knockout even in the picture) from what I can tell by testing and by researching it a bit.
You can avoid a custom binding by doing:
<input type="date" data-bind="value: myDate, valueUpdate: 'blur'" />我有类似的问题，但就我而言，即使模糊事件实际上也没有被触发。所以我使用带有 valueUpdate 属性的输入事件，并解决了问题。
I had similar issue, but in my case, even the blur event is actually not fired. So I used input event with valueUpdate property, and resolved the problem.