如果在输入字段中输入了错误的类型，则在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>

Answer 2

设置最后一个输入值并像这样检查如何？

let input = document.querySelector('input');
let lastInput = input.value;
input.addEventListener('input', (e) => {
    if (e.target.value === lastInput) {
        alert("Input must be a number");
    }
    lastInput = e.target.value;
});