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.

enter image description here

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

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -