使用触发事件打开 iOS 原生 datePicker答案

【问题标题】：opening iOS native datePicker with trigger event使用触发事件打开 iOS 原生 datePicker
【发布时间】：2012-07-02 09:36:55
【问题描述】：

我有一个要在 iOS 设备上运行的 web 应用程序，我正在尝试通过单击特定标签来调用本机 datePicker。

我知道如果我有一个<input type='date'>，它会通过触摸它来打开本机日期选择器。

我的策略是把这个带有“opacity: 0”的输入放在标签下，并将标签的点击事件绑定到输入的触发事件上，像这样：

$('#pickerLabel').bind('click',function () {
    $('#pickerInput').trigger('click');
});
$('#pickerInput').click(function () {
    alert("open Picker");
});

我观察到，这个方法只是触发了绑定到点击事件的函数（它会提示“open Picker”），但它并没有打开原生 iOS datePicker，就好像我点击了输入本身一样。

你能帮帮我吗？

PS：我的项目中还包含 jquery 移动框架，我尝试在输入中使用点击事件并得到完全相同的结果。

【问题讨论】：

标签： jquery ios

【解决方案1】：

您是否尝试过启动 WebKit 触摸事件？

var touchEvent = document.createEvent('TouchEvent');
touchEvent.initTouchEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, touches, targetTouches, changedTouches, scale, rotation);

https://developer.apple.com/documentation/webkitjs/touchevent

一个（未经测试的）示例可能如下所示：

$('#pickerLabel').bind('click', function(){
    var touchEvent = document.createEvent('TouchEvent');
    touchEvent.initTouchEvent('touchstart', true, true, document.getElementById('pickerInput'), null, 0, 0, 0, 0, false, false, false, false, [], [], [], 1.0, 0.0);
});

【讨论】：

你知道我在哪里可以找到这个用法的具体例子吗？
我已经更新了答案以包含一个示例。不过，我还没有遇到过如何实现它的官方示例。
我已经尝试过您在此处发布的代码，但出现以下错误：“NOT_SUPPORTED_ERR: DOM Exception 9: The implementation does not support the requested type of object or operation"

【解决方案2】：

我设法通过以下方式解决了这个问题：我将标签和输入放在两个不同的 div 中。我将两个 div 放在一起，让输入 div 具有更高的 z-index（并将不透明度保持为 0）。

我在这个论坛问题中使用了css：How to overlay one div over another div

这仍然只是一种没有所需行为的解决方法。

【讨论】：