javascript - Cordova iOS: Click on custom auto suggest not recognized cause keyboard closes -
in cordova app have problem on ios devices , have no idea how solve.
i have custom auto-suggest shows below input field while typing. contained in dialog box "position: fixed;". autocomplete unordered list. click on < li > element should place selected text input. problem is, when user clicks on li, input loses focus, keyboard disappears , whole fixed dialog box "jumps" down , click event not recognized. recognized when keyboard closed.
i tried several workarounds, giving focus input field after blur. not help. keyboard closes , opens instead of keeping opened.
any ideas how solve?
here video showing behaviour. recorded on ios simulator same behaviour on real iphone 6s.
i have found solution now. said click
event not triggered when keyboard hides, touchstart
event triggered.
so did workaround, looking touchstart
event followed blur
event. if touchstart-target not receive click event within given time, trigger one. works on test iphone 6s.
here code:
var iostaptarget=null; if (device.platform === 'ios') { js.eventlistener(document.body).add('iostap', 'touchstart', function (e) { iostaptarget = e.target; js.eventlistener(iostaptarget).add('iostapclick', 'click', function(e) { // when target receives click, not trigger click if (iostaptarget) js.eventlistener(iostaptarget).remove('iostapclick', 'click'); iostaptarget = null; }); // after short time unset target window.settimeout(function () { if (iostaptarget) js.eventlistener(iostaptarget).remove('iostapclick', 'click'); iostaptarget = null; }, 600) }); // on each input fields listen blur event , trigger click event on element received touchstart before var blurableelements = document.queryselectorall('input[type=text],input[type=email],input[type=password],textarea'); (var j = 0; j < blurableelements.length; ++j) { js.eventlistener(blurableelements[j]).remove('iosblur', 'blur'); js.eventlistener(blurableelements[j]).add('iosblur', 'blur', function () { window.settimeout(function() { if (iostaptarget) { js.eventlistener(iostaptarget).remove('iostapclick', 'click'); js.triggerevent(iostaptarget, 'click'); } }, 50); }); } }
ps: event handling comes own js "framework" js.js available here: https://github.com/janst123/js.js can use vanilla js event handling or jquery event handling too, of course.
Comments
Post a Comment