0

我创建了一个文本字段组件，其中包含一个常规文本字段和旁边的清除 (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()处理程序清空字段，移除清除按钮，然后再次聚焦文本字段。

问题

单击清除按钮时，虚拟键盘会在模糊和焦点之间短暂消失。是否可以始终保持键盘可见？

顺便说一句，我知道当整个文本被选中然后删除时清除按钮不会消失，但我不太担心这种情况:)

4

1 回答 1

1

尝试听touchstart而不是click，它应该在输入失去焦点之前触发（并且它也会更有响应性）。

于 2013-05-06T04:13:30.933 回答