jdo*_*doe 5 html javascript regex
我只想允许在表单字段中输入字母和数字。我已经使用正则表达式等尝试了许多变体，但无法禁用空格键或任何特殊字符键。
这是我的代码的最新副本：
document.querySelector('#upperCase').addEventListener('keyup', function(e) {
console.log(this.value);
if (e.which == '32') return false;
this.value = this.value.toUpperCase();
});#upperCase {
text-transform: uppercase;
}<form>
<input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>是否可以只允许在输入文本框中输入字母和数字？
这是我的jsfiddle：https://jsfiddle.net/bcjg7osr/29/
您应该使用Event.preventDefault()代替return false，因为这是 jQuery 特有的。
您还应该使用,keydown来代替, 因为在默认操作之后触发，所以现在阻止它已经太晚了。也可能是一种选择。keyupkeyupkeypress
另外，KeyboardEvent.which返回 a number，而不是 a string，所以最好这样做e.which === 32而不是e.which == \'32\'：
document.querySelector(\'#upperCase\').addEventListener(\'keydown\', (e) => {\n console.log(e.which);\n \n if (e.which === 32) {\n e.preventDefault();\n }\n});#upperCase {\n text-transform: uppercase;\n}<form>\n <input id="upperCase" maxlength="10" name="upperCase" type="text">\n</form>然而，作为旁注，请注意KeyboardEvent.which和KeyboardEvent.keyCode目前已弃用。较新的选项是KeyboardEvent.key和KeyboardEvent.code，但浏览器支持还不是很好。
2022 年更新：
\n这个答案有点旧了。现在您应该可以完全使用e.keyande.code而不是e.keyCodeand e.which，除非您需要支持非常旧的浏览器。
您可以在https://keyjs.dev/轻松检查它们的值。
\n更新后的答案如下所示：
\ndocument.querySelector(\'#upperCase\').addEventListener(\'keydown\', function(e) {\n console.log(e.code);\n \n if (e.code === \'Space\') {\n e.preventDefault();\n }\n});#upperCase {\n text-transform: uppercase;\n}<form>\n <input id="upperCase" maxlength="10" name="upperCase" type="text">\n</form>关于您是否可以使用RegExp 的问题，是的，您可以使用 RegExp 。
\n但是，请注意，如果您想防止输入字段中出现任何无效字符，则不能在patternHTML 属性中使用它，因为这只会在提交其所属的表单时验证其值，如您所见这里：
document.getElementById(\'form\').onsubmit = (e) => {\n e.preventDefault();\n};<form id="form">\n <input pattern = "\\w*" type="text">\n\n <button>SUBMIT</button>\n<form>另外，在事件监听器中使用 RegExpkeydown来验证输入的值将不起作用，因为您将获得上一个值，即最后一次击键之前的值：
document.querySelector(\'#upperCase\').addEventListener(\'keydown\', function(e) { \n const isInalid = !/^\\w*$/.test(this.value);\n \n console.log(`value = "${ this.value }", which is ${ /^\\w*$/.test(this.value) ? \'still valid.\' : \'now invalid.\' }`);\n \n if (isInalid) {\n e.preventDefault();\n }\n});#upperCase {\n text-transform: uppercase;\n}<form>\n <input id="upperCase" maxlength="10" name="upperCase" type="text">\n</form>但是，如果您使用以下命令，则可以使用正则表达式来验证每个按下的键KeyboardEvent.key：
document.querySelector(\'#upperCase\').addEventListener(\'keydown\', function(e) {\n const key = e.key;\n const isCharacter = key.length === 1;\n \n console.log(`e.key = ${ key } (${ isCharacter ? \'character\' : \'special key\' })`);\n \n // We don\'t want to prevent special keys like backspace or delete:\n if (isCharacter && !/\\w/.test(e.key)) {\n e.preventDefault();\n }\n});#upperCase {\n text-transform: uppercase;\n}<form>\n <input id="upperCase" maxlength="10" name="upperCase" type="text">\n</form>请注意，您仍然可以使用 执行类似的操作e.which，但在这种情况下您将不会使用 RegExp。
如果您需要更高级的行为（例如以真正特定的方式格式化输入的值），您可以做的是使用该input事件。
例如，假设我们想要一个带有千位分隔符的数值输入字段。一个超级基本的实现看起来像这样：
\ndocument.querySelector(\'#upperCase\').addEventListener(\'input\', function(e) { \n const numericValueMatch = this.value.match(/\\d+/g);\n \n if (!numericValueMatch) {\n this.value = \'\';\n \n return;\n }\n \n const valueAsNumber = parseInt(numericValueMatch.join(\'\'));\n \n console.log(`valueAsNumber = ${ valueAsNumber }`);\n \n // toLocaleString is not the best option, but that\'s ok for this example:\n this.value = valueAsNumber.toLocaleString();\n});<input id="upperCase" maxlength="10" type="text" />请注意，这只是一个超级基本的演示。您将需要额外的逻辑来在每次按键后保持光标的位置并使其总体上正常工作。理想的解决方案可能会监听多个事件。
\n