如何在输入字段中仅允许英文字母？

Question

所以，这是我的输入字段：

<input type={type} name={name} />

我怎么才能只允许英文字母？

这是RegEx，我相信我应该使用：/[A-Za-z]/ig

https://regex101.com/r/upWFNy/1

我假设onChange()事件应该用于setState()和event.target.value的组合。

谢谢。

PS。我需要打字这个WHILE。

Answer 1

您可以在输入中使用pattern属性。

    <input pattern = “[A-Za-z]”>

Answer 2

我会尝试这个onChange功能：

onChange={(e) => {
  let value = e.target.value

  value = value.replace(/[^A-Za-z]/ig, '')

  this.setState({
    value,
  })
}}

请参阅codepen：https://codepen.io/bozdoz/pen/vzJgQB

我的想法是用^反转你的正则表达式匹配器并用''替换所有非A-z字符

Answer 3

这应该是诀窍，除了ascii 0-127之外的所有字符都应该被排除在外，o到127也会给你空格，+， - ，/和标点符号这是有用的，如果你只想要字母那么[^ Az]应该这样做，如果你需要非空格字符，那么[^ Az \ s]应该工作：

document.getElementById('english').addEventListener('input', function(){
  this.value = this.value.replace(/[^\x00-\x7F]+/ig, '');
});

反应方式：

class InputEnglish extends React.Component {
  constructor(){
    super();
    this.state = {value: ''};
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    let val = e.target.value.replace(/[^\x00-\x7F]/ig, '');
    this.setState(state => ({ value: val }));
  }
  render() {
    return (<input 
        value={this.state.value}
        onChange={this.onChange}
    />);
  }
}

https://codepen.io/anon/pen/QVMgrd

Answer 4

您可以在元素上使用/[A-Za-z]/正则表达式和input事件处理程序（这将在每次键入新字符时触发）。如下所示：

const regex = /[A-Za-z]/;
function validate(e) {
  const chars = e.target.value.split('');
  const char = chars.pop();
  if (!regex.test(char)) {
    e.target.value = chars.join('');
    console.log(`${char} is not a valid character.`);
  }
}
document.querySelector('#myInput').addEventListener('input', validate);

<label for="myInput">Type some text:</label>
<input id="myInput" type="text" />

Answer 5

我不能这样做不允许数字，因为我没有写出其他答案，但你可以去keycode.info并输入数字并从选择器中删除它们。该网站将返回您按下的任何键盘项的键码