opening iOS native datePicker with trigger event
I have a webapp that is to be run in a iOS device, and I am trying to call the native datePicker, by clicking in a specific label.
I know that if I have an <input type='date'> it will open the native datepicker by touching it.
My strategy was to put this input with "opacity: 0" under the label and bind the click event of the label to the trigger event of the input, like this:
$('#pickerLabel').bind('click',function () {
$('#pickerInput').trigger('click');
});
$('#pickerInput').click(function () {
alert("open Picker");
});
What I observed is that this method just triggers the function binded to the click event (it alerts "open Picker") but it does not open the native iOS datePicker, as if I clicked the input itself.
Can you help me?
PS: I have the jquery mobile framework also included in the project and i tried using the tap event in the input and had exactly the same result.
Have you tried initiating a WebKit touch event?
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);
http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
An (untested) example might look like this:
$('#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);
});
I managed to solve this issue in the following way: I placed both the label and the input in two diferent divs. I placed both divs on top of each other, having the input div with higher z-index (and maintaining the opacity to 0).
I used the css in this forum question: How to overlay one div over another div
This is still only a workaround that does not have the desired behaviour.
链接地址: http://www.djcxy.com/p/75864.html上一篇: 禁用iFrame中的链接