4

我只想允许在表单字段中输入字母和数字。我使用正则表达式等尝试了许多变体，但我无法禁用空格键或任何特殊字符键。

这是我的代码的最新副本：

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/

4

4 回答 4

3

一种方法是在输入中使用模式属性。patter 属性的唯一问题是在提交表单之前它不会禁止使用空格，在这种情况下提交将不起作用并且将要求用户更改输入。这将只允许字母和数字。

<input pattern = "[A-Za-z0-9]" id="upperCase" maxlength="10" name="upperCase" 
type="text">
于 2018-09-05T20:31:47.703 回答
2

修复你的代码

您应该使用Event.preventDefault()而不是return false，因为这是特定于 jQuery 的。

您还应该使用keydown而不是keyup, 因为keyup在默认操作之后触发，所以阻止它为时已晚。keypress也可能是一种选择。

此外，KeyboardEvent.which返回 a ，而不是numbera string，因此最好不要这样做：e.which === 32e.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.keyand KeyboardEvent.code，但浏览器支持还不是很好。

使用 RegExp 仅验证字段

关于您是否可以使用RegExp的问题，是的，您可以使用 RegExp。

但是，请注意，pattern如果您想防止任何无效字符出现在输入字段中，则不能在 HTML 属性中使用它，因为这只会在提交其所属的表单时验证其值，如您在此处看到的：

document.getElementById('form').onsubmit = (e) => {
  e.preventDefault();
};
<form id="form">
  <input pattern = "\w*" type="text">

  <button>SUBMIT</button>
<form>

使用 RegExp 根据输入值防止 keyDown 事件

此外，在事件侦听器中使用 RegExpkeydown来验证输入的值将不起作用，因为您将获得上一个值，即最后一次击键之前的值：

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 事件

但是，您可以使用 RegExp 来验证每个按下的键，如果您使用KeyboardEvent.key：

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。

✨ 使用 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" />

请注意，这只是一个超级基本的演示。您需要额外的逻辑来在每次按键后保持光标的位置，并使其正常工作。理想的解决方案可能会监听多个事件。

于 2018-09-05T20:27:05.547 回答
1

添加了您的“仅字母和数字”要求。我想你也想允许Backspace。您可能会找到您想要允许的其他键（TAB、箭头键...）。

let allowedKeys = [..."01234567890abcdefghijklmnopqrstuvwxyz", "backspace"];

document.getElementById('upperCase').addEventListener('keydown', (e) => {
  console.log(e.key);
  if (!allowedKeys.includes(e.key.toLowerCase())) {
    e.preventDefault();
    return false;
  }
  e.target.value = e.target.value.toUpperCase();
});
#upperCase {
  text-transform: uppercase;
}
<form>
  <input id="upperCase" maxlength="10" name="upperCase" type="text">
</form>

于 2018-09-05T20:37:25.997 回答
0

您可以在您的 js 文件中执行此操作：

document.querySelector('#upperCase').addEventListener('keyup',function(e){
if(e.which=='32') this.value='Dont enter space please'
else this.value=this.value.toUpperCase();
});
于 2018-09-05T20:35:21.787 回答