Простой блог о web-технологиях

Ввод в Input только цифр

345
28.03.2018
Возникла задача ограничить ввод в текстовое поле input любых символов кроме цифр. Существует несколько вариантов решения данной задачи, в данной статье рассмотрим несколько из них.

Начнем с самого простого. В html5 появился атрибут "pattern", который указывает регулярное выражение, согласно которому необходимо проверять текстовое поле.

Имеем поле input с атрибутом pattern:
<input type="text" pattern="выражение">

Чтобы запретить вводить какие-либо данные, не предназначенные для ввода необходимо использовать регулярные выражения, например чтобы разрешить ввод только цифр, необходимо привести код к виду:
<input type="text" pattern="^[ 0-9]+$">

Более подробнее о регулярных выражениях можно прочитать на просторах интернета. Недостатком данного метода является то, что он не поддерживается старыми браузерами, например IE будет игнорировать данный атрибут в версиях ниже 10, так же в браузерах Safari данный атрибут не поддерживается.

Следовательно более правильным решением будет использование jquery:
<script>
$(document).ready(function() {
$('[name=number]').bind("change keyup input click", function() {if (this.value.match(/[^0-9]/g)) {this.value = this.value.replace(/[^0-9]/g, '');}});
});
</script>

<input maxlength="2" type="text" name="number" />

В данном примере для поля с именем number будет применено регулярное выражение, запрещающее ввод любых символов кроме цифр. Данный пример работает во всех браузерах и является самым правильным.

input, числа, jquery, html5
Комментарии
Оставить комментарий
необходимо заполнить выделенные поля
Statium пишет:
24.09.2018
Первый комментарий
васек пишет:
24.09.2018
парам пам пам