javascript - Virtual keyboard disappears briefly on anchor click -

i've created text field component comprising regular text field , clear (x) button next it.

this mark-up:

<div class="input-clear">     <input type="email" name="user" placeholder="email address" />     <a href="#">clear</a> </div> 

this code i'm using initialize it:

[].foreach.call(document.getelementsbyclassname('input-clear'), function(el) {     var input = el.getelementsbytagname('input')[0],     = el.getelementsbytagname('a')[0],     updatefield = function() {         if (input.value.length) {             a.style.display = 'inline';         } else {             a.style.display = 'none';         }     },     clearfield = function(event) {         event.preventdefault();         input.value = '';         input.focus();         updatefield();     };      if (input && a) {         input.addeventlistener('keyup', updatefield, false);         input.addeventlistener('change', updatefield, false);          a.addeventlistener('click', clearfield, false);          updatefield();     } }); 

the clearfield() event handler empties field, removes clear button , focuses text field again.

problem

when clear button clicked, virtual keyboard briefly disappears in between blur , focus. possible keep keyboard visible @ times?

btw, i'm aware clear button doesn't disappear when whole text selected , removed, i'm not worried scenario :)

try listening touchstart instead of click, should fire before input loses focus (and bit more responsive too).