javascript - 如果在输入字段中输入错误的类型，则在 Chrome 中显示消息

Question

在 Chrome (55.x) 中，如果用户尝试在输入中输入不匹配的类型(在我的例子中是数字输入)，表面上不会发生任何情况。为了增强可用性，我想显示一个弹出窗口，让用户知道他们正在尝试输入无效数据，而不是让他们认为输入已“损坏”。

这可以通过 FF 中的纯 JS 轻松实现(允许输入不匹配的类型，它只是无效):

input.addEventListener('input', function() {
    if (!this.checkValidity()) {
        this.value = '';
        console.log('please enter a number!');            
    }
}

由于 Chrome 实际上并未输入任何内容，因此当输入为空时，有效性检查始终会通过；除了忽略它之外，它似乎不会对错误的输入执行任何操作。

有什么方法可以覆盖此行为，或以其他方式达到预期效果吗？

Answer 1

当然，您可以为 keyup 做一个监听器，它会给您按下的键。

<script>
    var numInput = document.getElementById("num");
    numInput.addEventListener("keyup", function(e) {
       if (isNaN(String.fromCharCode(e.which))) {
           alert("Must be a number");
       }
    });
</script>