? 修复你的代码
您应该使用Event.preventDefault() 而不是return false，因为这是 jQuery 特有的。
您还应该使用keydown 而不是keyup，因为keyup 在默认操作之后触发，因此阻止它为时已晚。 keypress 也可以是一个选项。
另外，KeyboardEvent.which 返回一个number，而不是string，所以最好使用e.which === 32 而不是e.which == '32'：
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
console.log(e.which);
if (e.which === 32) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
? 关于如何获取按键的旁注
不过，请注意，KeyboardEvent.which 和 KeyboardEvent.keyCode 目前都已弃用。它们较新的选项是KeyboardEvent.key 和KeyboardEvent.code，但浏览器支持还不是很好。
? 使用正则表达式仅验证字段
关于您是否可以使用RegExp 的问题，是的，您可以使用RegExp。
但是，请注意，如果您想防止任何无效字符出现在输入字段中，则不能在 pattern HTML 属性中使用它，因为这只会在其所属的表单提交时验证其值，如您在此处看到的：
document.getElementById('form').onsubmit = (e) => {
e.preventDefault();
};
<form id="form">
<input pattern = "\w*" type="text">
<button>SUBMIT</button>
<form>
? 使用正则表达式根据输入值防止 keyDown 事件
此外，在keydown 事件侦听器中使用 RegExp 来验证输入的值将不起作用，因为您将获得上一个值，即最后一次击键之前的值：
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
const isInalid = !/^\w*$/.test(this.value);
console.log(`value = "${ this.value }", which is ${ /^\w*$/.test(this.value) ? 'still valid.' : 'now invalid.' }`);
if (isInalid) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
? 使用 RegExp 来防止基于按下的键的 keyDown 事件
但是，如果您使用 KeyboardEvent.key，则可以使用 RegExp 来验证每个按下的键：
document.querySelector('#upperCase').addEventListener('keydown', function(e) {
const key = e.key;
const isCharacter = key.length === 1;
console.log(`e.key = ${ key } (${ isCharacter ? 'character' : 'special key' })`);
// We don't want to prevent special keys like backspace or delete:
if (isCharacter && !/\w/.test(e.key)) {
e.preventDefault();
}
});
#upperCase {
text-transform: uppercase;
}
<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>
请注意，您仍然可以使用 e.which 执行类似的操作，但在这种情况下您将不会使用 RegExp。
✨ 使用正则表达式从输入事件中强制执行某种格式
如果您需要更高级的行为，例如以非常具体的方式格式化输入值，您可以使用input 事件来代替。
例如，假设我们想要一个带有千位分隔符的数值输入字段。一个超级基本的实现看起来像这样：
document.querySelector('#upperCase').addEventListener('input', function(e) {
const numericValueMatch = this.value.match(/\d+/g);
if (!numericValueMatch) {
this.value = '';
return;
}
const valueAsNumber = parseInt(numericValueMatch.join(''));
console.log(`valueAsNumber = ${ valueAsNumber }`);
// toLocaleString is not the best option, but that's ok for this example:
this.value = valueAsNumber.toLocaleString();
});
<input id="upperCase" maxlength="10" type="text" />
请注意，这只是一个超级基本的演示。您需要额外的逻辑来在每次按键后保持光标的位置，并使其正常工作。理想的解决方案可能会监听多个事件。