В данном уроке мы рассмотрим как с помощью js плагина masked input создавать различные маски ввода для текстовых элементов форм.
Примеры масок созданных при помощи masked input: jsfiddle.net/webrevenue/zfn82pLh/1/
Для того чтобы плагин masked input корректно работал, на вашем сайте должна быть подключена библиотека jQuery.
Подключение masked input
Код приведенный ниже, необходимо подключить к сайту (если у вас уже подключен jQuery, то его подключать не нужно)
<!-- Подключение библиотеки jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Подключение jQuery плагина Masked Input -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>Создание HTML маски ввода
Создания маски ввода в js коде осуществляется с помощью следующих знаков:
- Цифра 9 – соответствует цифре от 0 до 9.
- Символ a – представляет собой любой английский символ (A-Z, a-z).
- Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).
Пример создания маски ввода телефона для элемента input, имеющего id=»tel»:
<!-- Ввод номера телефона осуществляется с помощью маски -->
<input id="phone" type="text">
<script>
$(function(){
//Использование параметра completed
$("#phone").mask("8(999) 999-9999", {
completed: function(){ alert("Вы ввели номер: " + this.val()); }
});
});
</script>В результате получим следующее.
Больше примеров смотрите здесь: jsfiddle.net/webrevenue/zfn82pLh/1/.
Смотрите также: Маска ввода телефона в input на чистом JS.
