CODEWITHSUNDEEP
javascriptandroidwebviewandroid-virtual-keyboard
Ja͢ck
Ja͢ck

Reputation: 173572

Virtual keyboard disappears briefly on anchor click

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 :)

Upvotes: 0

Views: 686

Answers (1)

Dagg Nabbit
Dagg Nabbit

Reputation: 76736

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

Upvotes: 1

Related Questions