Виртуальная клавиатура на короткое время исчезает при щелчке

Question

Я создал компонент текстового поля, включающий обычное текстовое поле и кнопку очистки (x) рядом с ним.

Это наценка:

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

Это код, который я использую для его инициализации:

[].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();
    }
});

clearField() Обработчик событий очищает поле, удаляет кнопку очистки и снова фокусирует текстовое поле.

проблема

При нажатии кнопки очистки виртуальная клавиатура на короткое время исчезает между размытием и фокусом. Можно ли всегда держать клавиатуру видимой?

Кстати, я знаю, что кнопка очистки не исчезает, когда весь текст выделен, а затем удален, но я не слишком беспокоюсь об этом сценарии:)

Answer 1

Попробуйте слушать touchstart вместо click, он должен срабатывать до того, как ввод потеряет фокус (и он тоже будет немного более отзывчивым).