- розмітка форми
- стилізація форми
- jQuery скрипт
- Мобільна перевірка поля телефону
- фінальний етап
- результат
- висновок
- оновлена розмітка
- висновок 2
Привіт, дорогі читачі!
Я як завжди з сюрпризом) У цій статті я покажу Вам, як можна зробити поле для введення телефону, але не просте а золоте, з маскуванням і перевіркою.
Що таке маскування поля? Напевно Ви вже стикалися з такою штукою, що у поля телефону є така ось підказка +38 (___) ___ __ __ - саме вона і називається маскуванням. Перевага маскування над звичайним тегом placeholder полягає в тому, що вона не зникає після кліка по заповнювати полю. Для реалізації такої штуки новий велосипед ми винаходити не будемо а використовуємо готове рішення у вигляді jQuery плагіна Masked Input - цей плагін реально крутий і отримав дуже широке поширення в усьому світі.
розмітка форми
Не буду ходити навколо, а покажу як ми застосуємо цей чудовий плагін. Для початку створимо просту форму, яка містить поле для телефону ну і кнопку сабмита форми:
<Form action = "#" method = "post" class = "phone_form"> <div class = "user_phone"> <input type = "text" placeholder = "(___) ___ __ __" id = "user_phone" class = "rfield" /> </ div> <input type = "submit" class = "btn_submit" /> </ form>стилізація форми
Полю для телефону я присвоїв ідентифікатор #user_phone, і обернув його додатковим дивом, щоб додати за допомогою псевдоелемента: before код країни (в моєму випадку України +38, Ви можете додати свій, але врахуйте що тоді потрібно збільшити або зменшити відступ зліва у поля телефону , див. нижче стилі). Відразу пропишемо пару рядків стилів для нашої форми:
.phone_form {width: 300px; margin: 50px auto; position: relative; } #User_phone {width: 300px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 8px 8px 8px 36px; height: 40px; border: 1px solid #ccc; font-size: 16px; color: # 363636; } #User_phone: focus {outline: none; border-color: # 363636; } Input # user_phone: -moz-placeholder {color: # 363636; } Input # user_phone :: - webkit-input-placeholder {color: # 363636; } .User_phone {position: relative; } .User_phone: before {content: "+38"; display: block; height: 40px; color: # 363636; position: absolute; top: 6px; left: 7px; font-size: 16px; } .Btn_submit {height: 30px; position: absolute; top: 5px; right: 5px; background: # 363636; color: #fff; border: none; width: 120px; cursor: pointer; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .Btn_submit.disabled {color: # 363636; background: #ccc; }Як Ви бачите я оформив так само тег placeholder, вобще він потрібен тому, що звичайна поведінка плагіна це поява маскування при кліці по полю, коли поле втрачає фокус то і маскування теж зникає, щоб такого не відбувалося я додав тег placeholder. Тут нічого надприродного я не написав, тому йдемо далі і напишемо простий jQuery скрипт.
jQuery скрипт
Перед закриває тегом body підключимо бібліотеку jQuery, плагін Masked Input, ну і наш скрипт:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </ script> <script src = "jquery.maskedinput.min.js"> </ script> <script src = "script.js"> </ script>Тепер, коли ми всі підключили, відкриваємо файл script.js і будемо в ньому писати наш скрипт, але для початку давайте розберемо логіку роботи скрипта. Насамперед ми «повісимо» подія mask на поле телефону а перевірку заповнення будемо здійснювати по принципу з попередньої статті про просту перевірку полів форми , Тільки з деякими змінами. Наведу лістинг скрипта:
(Function ($) {//// ---> Перевірка на існування елемента на сторінці jQuery.fn.exists = function () {return jQuery (this) .length;} // Phone Mask $ (function () {if ($ ( '# user_phone'). exists ()) {$ ( '# user_phone'). each (function () {$ (this) .mask ( "(999) 999-99-99");}); } if ($ ( '. phone_form'). exists ()) {var form = $ ( '. phone_form'), btn = form.find ( '. btn_submit'); form.find ( '. rfield'). addClass ( 'empty_field'); setInterval (function () {if ($ ( '# user_phone'). exists ()) {var pmc = $ ( '# user_phone'); if ((pmc.val (). indexOf ( " _ ")! = -1) || pmc.val () == '') {pmc.addClass ( 'empty_field');} else {pmc.removeClass ( 'empty_field');}} var sizeEmpty = form.find ( '.empty_field'). size (); if (sizeEmpty> 0) {if (btn.hasClass ( 'disabled')) {return false} else {btn.addClass ( 'disabled')}} else {btn.removeClass ( 'disabled')}}, 200); btn.click (function () {if ($ (this) .hasClass ( 'disabled')) {return false} else {form.submit ();}});} });}) (jQuery);Як Ви змогли помітити, у скрипта додався такий ось блок:
if ($ ( '# user_phone'). exists ()) {var pmc = $ ( '# user_phone'); if ((pmc.val (). indexOf ( "_")! = -1) || pmc.val () == '') {pmc.addClass ( 'empty_field'); } Else {pmc.removeClass ( 'empty_field'); }}У цьому шматку коду за допомогою умов ми перевіряємо: якщо в поле є знак «_» або воно порожнє, то полю телефону додається клас empty_field, в іншому випадку це клас видаляється, функція setInterval () підхоплює цю зміну практично миттєво і кнопка сабмита форми стає активною.
Мобільна перевірка поля телефону
Здавалося все реально круто і красиво. Але як то кажуть мріяти не шкідливо, на сцену виходячи мобільні браузери і хто ще не стикався, той зіштовхнеться з тією проблемою, що javascript в них працює не дуже, тобто ніфіга нормально не працює і це сумно, проте не все втрачено. Завдяки HTML5 в арсеналі верстальника є браузерні кошти перевірки полів форми і радує те, що мобільні браузери їх підтримують!
Браузерна перевірка дуже проста, не потрібно писати ніяких скриптів, досить в розмітці форми вказати атрибут required полю, яке є обов'язковим для заповнення, стандартно це виглядає так:
<Form action = "#" method = "post" class = "phone_form"> <div class = "user_phone"> <input type = "tel" placeholder = "(___) ___ __ __" id = "user_phone" required / > </ div> <input type = "submit" class = "btn_submit" /> </ form>Тобто справа залишається за малим, потрібно організувати перевірку звідки користувач переглядає Ваш проект / сайт, це можна здійснити ще одним дуже маленьким jQuery плагіном, який називається is.mobile.js (він є в папці з архівом уроку), підключимо його там же де і інші скрипти:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </ script> <script src = "jquery.maskedinput.min.js"> </ script> <script src = "is.mobile.js"> </ script> <script src = "script.js"> </ script>фінальний етап
Щоб не було ніяких конфліктів, розмітку форми ми відразу пишемо для мобільних браузерів:
<Form action = "#" method = "post" class = "phone_form"> <div class = "user_phone"> <input type = "tel" required pattern = "[0-9 _-] {10}" title = " формат: (096) 999 99 99 "placeholder =" (___) ___ __ __ "id =" user_phone "/> </ div> <input type =" submit "class =" btn_submit "/> </ form>У формі все досить просто:
- type = "tel" - вказуємо що це поле для введення телефону
- required - обов'язкове поле
- pattern = "[0-9 _-] {10}" - патерн поля, цифри 0-9 вказують на те що вводяться символи повинні бути цифрами, а {10} - на те що цих цифр має бути 10
- title = "Формат: (096) 999 99 99" - це мабуть найкрутіше, мало того що підказка показується при наведенні, вона також вилазить якщо кликнули по кнопці коли нічого не заповнено (див. нижче)
Туди-сюди, нарешті ми добралися до того моменту, що потрібно грамотно оформити наш скрипт, привожу повний лістинг файлу script.js:
(Function ($) {//// ---> Перевірка на існування елемента на сторінці jQuery.fn.exists = function () {return jQuery (this) .length;} // Phone Mask $ (function () {if (! is_mobile ()) {if ($ ( '# user_phone'). exists ()) {$ ( '# user_phone'). each (function () {$ (this) .mask ( "(999) 999-99 -99 ");}); $ ( '# user_phone') .addClass ( 'rfield') .removeAttr ( 'required') .removeAttr ( 'pattern') .removeAttr ( 'title') .attr ({ 'placeholder' : '(___) ___ __ __'});} if ($ ( '. phone_form'). exists ()) {var form = $ ( '. phone_form'), btn = form.find ( '. btn_submit') ; form.find ( '. rfield'). addClass ( 'empty_field'); setInterval (function () {if ($ ( '# user_phone'). exists ()) {var pmc = $ ( '# user_phone'); if ((pmc.val (). indexOf ( "_")! = -1) || pmc.val () == '') {pmc.addClass ( 'empty_field');} else {pmc.removeClass ( ' empty_field ');}} var sizeEmpty = form.find ('. empty_field '). size (); if (sizeEmpty> 0) {if (btn.hasClass (' disabled ')) {return false} else {btn.addClass ( 'disabled')}} else {btn.removeClass ( 'Disabled')}}, 200); btn.click (function () {if ($ (this) .hasClass ( 'disabled')) {return false} else {form.submit (); }}); }}}); }) (JQuery);Як Ви змогли помітити у нас додалася перевірка if (! Is_mobile ()) - тобто коли користувач зайшов на сайт ні з мобільного пристрою в розмітці відбуваються такі зміни: видаляються атрибути title, pattern, required, додається клас rfield (перевіряється поле).
результат
Результат наших зусиль можна переглянути клікнувши по кнопці «Демо», щоб завантажити вихідні натисніть кнопку «Завантажити»:
І на останок пару бонусів: проста перевірка полів форми на заповнення і повна перевірка полів форми з валідація email, телефону і чекбоксів !
висновок
Тепер ми вміємо не напружуючись перевіряти поле телефону будь-якої форми. Ваші побажання, корисні і не дуже правки моїх скриптів, залишайте в коментарях! Діліться статтею в соціальних мережах! Дякую за увагу!
Вище наведений код злегка застарів, тому я оновив вихідні коди і нижче викладаю лістинг оновленого скрипта і розмітки (стилі дивіться в исходниках вони особливо не оновлювалися).
Про зміни: скрипт is-mobile.js я відключив - марна штука, masked input працює і на мобільних пристроях (версію в исходниках оновив до 1.4.1), і код скрипта вийшов більш читабельним і зрозумілим. Також змінилася розмітка атрибут pattern у input'ов я прибрав за непотрібністю.
оновлена розмітка
<Form action = "#" method = "post" class = "phone_form"> <div class = "user_phone"> <input type = "tel" required placeholder = "+ 38 (___) ___-__-__" id = "user_phone" class = "user-phone" title = "Формат: +38 (096) 999 99 99" /> </ div> <input type = "submit" class = "btn_submit" disabled /> </ form>оновлений скрипт
(Function ($) {var $ body; $ (document) .ready (function () {$ body = $ ( 'body'); $ body .find ( '. User-phone'). Each (function () { $ (this) .mask ( "+ 38 (999) 999-99-99", {autoсlear: false});}); $ body.on ( 'keyup', '. user-phone', function () { var phone = $ (this), phoneVal = phone.val (), form = $ (this) .parents ( 'form'); if ((phoneVal.indexOf ( "_")! = -1) || phoneVal = = '') {form.find ( '. btn_submit'). attr ( 'disabled', true);} else {form.find ( '. btn_submit'). removeAttr ( 'disabled');}});}) ;}) (jQuery);Трохи пояснень: задаємо змінну $ body; знаходимо все інпут з телефонами - задаємо їм маску і вказуємо параметр не очищати при втраті фокуса; відстежуємо подія натискання кнопок в поле телефону - якщо заповнено то у кнопки відправки форми видаляється атрибут disabled, в іншому випадку додається.
висновок 2
Спасибі, Вам, мої читачі і коментатори по можливості я буду оновлювати і додавати новий контент
Що таке маскування поля?