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

如果用户尝试在输入中输入不匹配的类型（在我的情况下是数字输入），Chrome（55.x）中不会出现任何外观。为了提高可用性，我希望显示一个弹出窗口，让用户知道他们正试图输入无效数据，而不是让他们认为输入是“破碎”的。如果在输入字段中输入了错误的类型，在Chrome中显示消息

这是很容易在FF纯JS实现（这将允许输入失配系，它只是无效）：

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

由于Chrome实际上并没有什么投入，但是，有效性输入为空时检查总是通过;它似乎没有对错误的输入做任何事情，除了忽略它。

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

来源

2017-01-25 chrBrd

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

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

来源

2017-01-25 23:26:55 nixkuroi

我曾考虑过这种方法，但因为它会变得非常混乱 - 您必须考虑Delete和Backspace以及可以在输入字段上操作的任何键盘快捷方式;而不是一个很好的，简单的功能，你可以迅速结束了令人费解的代码。虽然我很欣赏你的答案（并且它比我的代码更优雅），但如果它选择的是默认行为，我将采用懒惰选项。 ;） – chrBrd

如何设置最后一个输入值并检查是否如此？

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

来源

2017-01-25 23:45:44

不匹配的类型根本不会将其设置为输入的值，'input.value'总是空的 - 具体来说，使用您的代码意味着如果删除了有效数字，则会弹出消息。这里的困难是让它识别输入的空白，因为它被发送了无效的数据，而由于用户删除了某些内容而被清空。 – chrBrd

因此，无论何时输入事件发生，我更新lastInput，以便它可以检测到删除。我尝试了铬，似乎与删除工作。 –

看起来我有点误会 - 这可能是由于Chrome中的错误，这是不寻常的行为。使用你的代码，在字段中输入一个字母。你会得到警报。该字段仍然是空的，并且'lastInput'和'target.value'都没有值。现在按下“Backspace” - 你会再次看到警报。不知道为什么会发生这种情况，因为没有任何东西需要删除。恐怕我不会接受这个答案，因为答案并不完美，即使这不是你的错，但是它是一个很好的尝试。 – chrBrd

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

回答

相关问题