Блог

Главная - Вопросы по программированию - Реагируйте нативно, как разрешить только числа при вводе текста? Числовой — это просто цифровая клавиатура

Реагируйте нативно, как разрешить только числа при вводе текста? Числовой — это просто цифровая клавиатура

#regex #react-native #textinput

Вопрос:

Я хочу ввести 6 цифр в качестве входных данных для проверки, но у меня проблема с вводом текста о нечисловых символах.

Во-первых, я сделал

 <TextInput maxLength={6} style={styles.textInput} onChangeText={value => this.onTextChanged(value) }  value={this.state.codeInput} keyboardType='numeric' />

И у меня есть функция для обнаружения нечисловых символов.

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ codeInput: value.replace(/[- #*;,.<>{}[]\/]/gi, '') });
  }

В мобильном телефоне он открывает только цифровую клавиатуру с символом точки. Даже, пользователь нажимает символ точки. Функция не позволяет этого, но моя проблема заключается в физической клавиатуре, копипасте и открытии в веб-браузере. Я могу ввести что угодно в веб-браузере. Функция не действует в веб-браузере ПК.

Как я могу заблокировать все символы, кроме цифр 0-9, при копировании и вставке, для физических клавиатур и в веб-браузере ПК.

Комментарии:

1. Вам нужно использовать это onChange событие.

2. Если возможно, пожалуйста, предоставьте jsfiddle/кодовый код.

Ответ №1:

Может быть, вы могли бы просто использовать это регулярное выражение value.replace(/[^0-9]/, '')

Если вы хотите также управлять копией и прошлым, используйте глобальный флаг:
value.replace(/[^0-9]/g, '')

Комментарии:

1. Спасибо. Это сработало как входные данные, и как я могу решить проблему с копипастом?

2. добавьте глобальный флаг в конце регулярного выражения таким образом value.replace(/[^0-9]/g, '')

Метки: ,