所以,这是我的输入字段:
<input type={type} name={name} />
我怎么只允许英文字母?
这是RegEx
,我相信我应该使用:/[A-Za-z]/ig
https://regex101.com/r/upWFNy/1
我假设应该将onChange()
和setState()
结合使用event.target.value
事件。
谢谢。
PS。我需要输入WHILE。
答案 0 :(得分:4)
您可以在输入中使用pattern属性。
<input pattern = “[A-Za-z]”>
答案 1 :(得分:2)
这应该可以解决问题,除了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}
/>);
}
}
答案 2 :(得分: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
这个想法是用^
反转您的正则表达式匹配器,并用''
答案 3 :(得分:1)
您可以在元素上使用/[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" />
答案 4 :(得分:0)
我不能这样做,因为我没有写其他答案,所以不允许数字,但是您可以转到keycode.info并输入数字,然后从选择器中删除它们。网站将返回您按下的任何键盘项目的键代码
答案 5 :(得分:0)
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">