Как разрешить только английские буквы в полях ввода? - PullRequest
Новая
       12

Как разрешить только английские буквы в полях ввода?

0 голосов
/ 05 сентября 2018

Итак, это мое поле ввода: 

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

Как я могу разрешить только английские буквы?

Это RegEx, я считаю, что я должен использовать: /[A-Za-z]/ig

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

Я предполагаю, что для этого следует использовать событие onChange() с комбинацией setState() и event.target.value.

Спасибо.

PS. Мне нужно, чтобы это набирало WHILE.

Ответы [ 5 ]

0 голосов
/ 05 сентября 2018

Вы можете использовать регулярное выражение /[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" />
0 голосов
/ 05 сентября 2018

Я бы попробовал эту 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 символов на ''

0 голосов
/ 05 сентября 2018

Это должно сработать, все символы кроме 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

0 голосов
/ 05 сентября 2018

Я не могу сделать это, чтобы не разрешать числа, потому что я не написал этот другой ответ, но вы можете перейти к keycode.info и ввести числа и исключить их из селектора. Веб-сайт вернет код клавиши любого элемента клавиатуры, который вы нажимаете

0 голосов
/ 05 сентября 2018

Вы можете использовать атрибут pattern в своем входе. 

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