如何使 JavaScript 阻止文本框中的“空格键”

Question

首先，我已经尝试过this solution，但它对我不起作用，除非我将脚本放在 HTML 页面中（我没有这样做，因为我有一个包含所有脚本的页面）。另一个可行但我不明白的解决方案是：

<input type="password" id="pwd" required pattern=".{8,16}" title="8 characters minimun, 16 characters maximum" name="fpwd" placeholder="Password" size = "13" onkeypress="return (event.keyCode != 32&&event.which!=32)>

那么，问题是：为什么第一个解决方案只有在脚本位于 HTML 页面中时才有效？

Answer 1

每次用户在文本字段中输入字符时，都会执行onkeypress 事件处理程序。

输入字符的键码根据环境（浏览器）存储在事件的keyCode 或which 参数中。

如果字符代码等于 SPACE 的键代码 (32)，则事件处理程序返回 false，这会导致浏览器关闭事件，即阻止它将键入的字符添加到输入字段。

输入此 sn-p 以查看不同的键码：

<input onkeypress="return console.log(event.keyCode || event.which), (event.keyCode != 32 && event.which != 32)" />

Answer 2

这样的事情怎么样：

document.getElementById("pwd").addEventListener('keydown', function (event)
{
    // if the keyCode is 32 ( space key was pressed )
    if (event.keyCode === 32) {
        // prevent default behaviour
        event.preventDefault();
        return false;
    }
});

工作小提琴：https://jsfiddle.net/a7yprnjd/