Question

我有一个要在iOS设备上运行的webapp，我试图通过单击特定标签来调用本机datePicker。

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

我的策略是在标签下输入“opacity：0”，并将标签的click事件绑定到输入的触发事件，如下所示：

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

我观察到的是，此方法只是触发绑定到click事件的函数（它警告“打开Picker”），但它不会打开本机iOS datePicker，就好像我点击了输入本身一样。

你能帮助我吗？

PS：我有jquery移动框架也包含在项目中，我尝试在输入中使用tap事件并且具有完全相同的结果。

Answer 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);
});

Answer 2

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

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

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

使用触发器事件打开iOS本机datePicker

2 个答案: