Virtual keyboard disappears briefly on anchor click

Question

I've created a text field component comprising a regular text field and a clear (x) button next to it.

This is the mark-up:

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

This is the code I'm using to initialize it:

[].forEach.call(document.getElementsByClassName('input-clear'), function(el) {
    var input = el.getElementsByTagName('input')[0],
    a = 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 the field, removes the clear button and then focuses the text field again.

Problem

When the clear button is clicked, the virtual keyboard briefly disappears in between the blur and focus. Is it possible to keep the keyboard visible at all times?

Btw, I'm aware that the clear button doesn't disappear when the whole text is selected and then removed, but I'm not too worried about that scenario :)

Answer 1

Try listening for touchstart instead of click, it should fire before the input loses focus (and it will be a bit more responsive too).