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

Question

[TreeFall1]

У меня есть input, на который я повесил pattern="\d*". Вроде как это должно было разрешить вводить только цифры, но почему то не сработало. Почему? Может на реакт как то по другому надо это делать?

Comments

[0xD34F]

Вы не знаете, для чего предназначен атрибут pattern. Откройте документацию и разберитесь.

Answer 1

[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} />

Answer 2

[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);
});

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

Comments

[svm2001]

mask. Не masc =))))

[godsplane]

Я бы постеснялся писать этот ответ, респект конечно за смелость написания ответа в ветке реакта с кодом из jquery

[alekssamos]

godsplane, я знаю. Но здесь главное понять принцип. По какому-то событию таким образом фильтровать данные. То есть просто направить автора вопроса в нужное направление. Вдруг он думал, что pattern изначально так и работает