Задать вопрос
@TreeFall1

Почему не работает pattern на input?

У меня есть input, на который я повесил pattern="\d*". Вроде как это должно было разрешить вводить только цифры, но почему то не сработало. Почему? Может на реакт как то по другому надо это делать?
  • Вопрос задан
  • 622 просмотра
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Elaryks
@Elaryks
Проверка с помощью атрибута pattern срабатывает непосредственно перед отправкой формы. Кроме того, это не запретит ввод символов, отличных от цифр, а лишь покажет уведомление в случае несоответствия. Вашу же задачу можно решить несколькими способами.
Первый вариант: <input type="number" />. Из особенностей: он допускает ввод некоторых символов, отличающихся от цифр (например, "+" и "e").
Второй вариант: перехватывать событие onChange у поля ввода:
const [value, setValue] = useState('')

const handleInputChange = (e) => {
  setValue(e.target.value.replace(/\D/g, ''))
}

<input value={value} onChange={handleInputChange} />
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@alekssamos
Программист любитель
UPD: возможно, вы ищете input masc? Когда допустим надо ввести номер телефона, в поле ввода маска
+7 (___) ___-__-__
И она заполняется цифрами при вводе?
Тогда так в гугле и ищите: input masc js

___
Я знаю, что вам нужно.
Это, правда, jQuery, но, думаю, принцип понятен.
$(document).on('change', 'input[pattern]', function() {
	var re = new RegExp($(this).attr('pattern'), 'g');
	var newVal = '';
	for (i in m = $(this).val().match(re)) {
		newVal += m[i];
	}
	$(this).val(newVal);
});

Пример работы здесь (где вход или регистрация).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы