Question

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

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

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/

Answer 1

一种实现方法是在输入中使用pattern属性。 patter属性的唯一问题是，在提交表单之前，它将不允许空格，在这种情况下，提交将无法进行，并且将要求用户更改输入。这将只允许字母和数字。

<input pattern = "[A-Za-z0-9]" id="upperCase" maxlength="10" name="upperCase" 
type="text">

Answer 2

修改代码

您应该使用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的问题，可以，可以使用RegExp。

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

document.getElementById('form').onsubmit = (e) => {
  e.preventDefault();
};

<form id="form">
  <input pattern = "\w*" type="text">

  <button>SUBMIT</button>
<form>

使用RegExp防止基于输入值的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。

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

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

Answer 3

添加了“仅字母和数字”要求。我想您也想允许 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>

Answer 4

您可以在js文件中完成此操作：

document.querySelector('#upperCase').addEventListener('keyup',function(e){
if(e.which=='32') this.value='Dont enter space please'
else this.value=this.value.toUpperCase();
});

如何在网页表单上禁用或阻止空格键输入

4 个答案: