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

Posted 2023-02-22

【中文标题】如何在输入字段中只允许英文字母？

【英文标题】：How to allow only English letters in input fields?

【发布时间】：2019-02-10 17:20:15

【问题描述】：

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

<input type=type name=name />

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

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

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

我假设onChange() 事件应该与setState() 和event.target.value 结合使用。

谢谢。

附言。我需要在打字时进行此操作。

【问题讨论】：

这里已经概述了：***.com/questions/7144167/…

@KevinLewis，嗨。您能否更新您的答案，但仅限英文，请不要数字？谢谢。

英语是一种有趣的语言，因为它使用了许多不在其“字母表”中的字母。所以，你确定你想要这个吗？如果是这样，也许您应该将其重述为大写和小写 Basic Latin 字母。

注意：您无法告诉网络浏览器允许或不允许哪些字符。但是您可以使用各种事件触发的 javascript 或 html 模式来删除不需要的字符。这就是您将在答案中看到的内容。

【参考方案1】：

我会试试这个onChange 函数：

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

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

  this.setState(
    value,
  )

查看代码：https://codepen.io/bozdoz/pen/vzJgQB

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

【讨论】：

是的.. 但对我来说，问题是value 总是空的。当我输入文本时，它会动态填充。这就是为什么它在value=this.state.value@bozdoz 失败

对于 jQuery，使用 $(this).val($(this).val().replace(/[^A-Za-z]/ig, ''))

【参考方案2】：

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

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

【参考方案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

【讨论】：

嗨，你能用 React 的方式写吗？

@JohnSam 在 React 中做的不多，但这应该可以。

@JohnSam 看看它在那里工作的帖子中的 codepen。如果它仍然不起作用，请告诉我。 :)

是的.. 但对我来说，问题是value 总是空的。当我输入文本时，它会动态填充。这就是它无法获取value 的原因。

【参考方案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" />

【讨论】：

如果我在输入的中间键入、粘贴或删除无效字符，这将不起作用。看看这个：***.com/questions/51065370/…

@Danziger 我尝试在 Chrome v 85 上粘贴一个非字母字符示例，它似乎可以正常工作。您有没有在特定浏览器中无法运行的示例？

如果你把它粘贴到最后就可以了。尝试将光标移动到左侧并将其粘贴到那里。我也在使用 Chrome 85。

【参考方案5】：

您可以尝试使用 Regx 来解决此问题。只需使用 regx 检查输入的字符是否为字母。如果不是，则不要更新状态值。

import React from "react";

class InputValidationDemo extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      type: "text",
      name: "username",
      value: ""
    ;
  
  onChange = (e) => 
    const re = /^[A-Za-z]+$/;
    if (e.target.value === "" || re.test(e.target.value))
      this.setState( value: e.target.value );
  ;

  render() 
    const  type, name, value  = this.state;
    return (
      <div>
        <input type=type name=name value=value onChange=this.onChange />
      </div>
    );
  

export default InputValidationDemo;

https://codesandbox.io/s/react-input-only-letters-qyf2j

重要的部分是正则表达式。你可以改变你的 通过更改正则表达式来验证类型。

【参考方案6】：

  alphacheck(e: any) 
    const regex = /[A-Za-z]/;
    const chars = e.target.value.split('');
    const char = chars.pop();
    console.log(char);
    if (!regex.test(char)) 
      e.target.value = chars.join('');
      alert("Please enter only alphabets");
      e.preventDefault();
      return false;
     
    
    else 
      return true;
    
  


<input placeholder="Full Name" formControlName="fullName"  pattern="[a-zA-Z]*"  (keypress)="alphacheck($event)"  name="fullname" value="" type="text" class="form-control">

【讨论】：

请在您的回答中提供一些解释。