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

在Chrome（55.x）中，如果用户试图在输入中输入不匹配的类型（在我的例子中是数字输入），表面上看起来什么都不会发生。为了提高可用性，我想显示一个弹出窗口，让用户知道他们试图输入无效数据，而不是让他们认为输入是“坏的”

使用FF中的纯JS很容易做到这一点（它允许输入不匹配的类型，但它无效）：

因为Chrome实际上没有输入任何东西，但是，当输入为空时，有效性检查总是通过；除了忽略错误输入之外，它似乎对错误输入没有任何作用

---

是否有任何方法可以覆盖此行为，或以其他方式达到预期效果？

当然，您可以为keyup做一个侦听器，它将为您提供按下的键

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

var numInput=document.getElementById（“num”）；
numInput.addEventListener（“键控”，函数（e）{
if（isNaN（String.fromCharCode（e.which）））{
警报（“必须是一个数字”）；
}
});

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

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

var numInput=document.getElementById（“num”）；
numInput.addEventListener（“键控”，函数（e）{
if（isNaN（String.fromCharCode（e.which）））{
警报（“必须是一个数字”）；
}
});

设置最后一个输入值并像这样检查怎么样

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

---

设置最后一个输入值并像这样检查怎么样

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

---

我曾考虑过这种方法，但不考虑它，因为它可能会变得非常混乱-你必须考虑删除和退格，以及任何可以在输入字段上操作的键盘快捷键；而不是一个好的，简单的函数，你可以很快结束卷积代码。虽然我很欣赏你的回答（而且它比我的代码要优雅得多），但如果它是在这两者之间选择，还是在默认行为之间选择，我将选择懒惰选项。；）我曾考虑过这种方法，但不考虑它，因为它可能会变得非常混乱-你必须考虑删除和退格，以及任何可以在输入字段上操作的键盘快捷键；而不是一个好的，简单的函数，你可以很快结束卷积代码。虽然我很欣赏你的回答（而且它比我的代码要优雅得多），但如果它是在这两者之间选择，还是在默认行为之间选择，我将选择懒惰选项。；）不匹配的类型根本不符合输入的值，

input.value

始终为空-具体地说，使用代码意味着如果删除了有效的数字，将弹出消息。这里的困难在于让它识别输入是空的，因为它被发送了无效数据，而不是因为用户删除了某些内容而为空。因此，每当发生输入事件时，我都会更新lastInput，以便它能够检测到删除。我在chrome上试过，看起来好像是在删除。看起来我有点搞错了——这可能是因为chrome上有一个bug，这是不寻常的行为。使用您的代码，在字段中键入一个字母。你会得到警告的。该字段仍然为空，并且

lastInput

和

target.value

都没有值。现在按

Backspace

-您将再次收到警报。不知道为什么会发生这种情况，因为没有任何内容可以删除。恐怕我不会接受这个答案，因为它不是很完美，尽管这不是你的错，但这是一个很好的尝试。不匹配的类型根本不符合输入值，

input。value

总是空的-具体地说，使用你的代码意味着如果删除了有效的数字，消息会弹出。这里的困难在于让它识别输入是空的，因为它被发送了无效数据，而不是因为用户删除了某些内容而为空。因此，每当发生输入事件时，我都会更新lastInput，以便它能够检测到删除。我在chrome上试过，看起来好像是在删除。看起来我有点搞错了——这可能是因为chrome上有一个bug，这是不寻常的行为。使用您的代码，在字段中键入一个字母。你会得到警告的。该字段仍然为空，并且

lastInput

和

target.value

都没有值。现在按

Backspace

-您将再次收到警报。不知道为什么会发生这种情况，因为没有任何内容可以删除。恐怕我不会接受这个答案，因为它不是很完美，尽管这不是你的错，但我还是投了更高的票，因为这是一个很好的尝试。