Question

在Chrome（55.x）中，如果用户尝试在输入中输入不匹配的类型（在我的情况下为数字输入），则不会向外发生任何外观。为了增强可用性，我希望显示一个弹出窗口，让用户知道他们正在尝试输入无效数据，而不是让他们认为输入被打破了。

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

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

因为Chrome实际上并没有输入任何内容，所以有效检查总是在输入为空时通过;除了忽略它之外，它似乎没有对错误的输入做任何事情。

有没有办法覆盖此行为，或以其他方式达到预期效果？

Answer 1

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

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;
});

Answer 2

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

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

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

2 个答案: