Маска ввода телефона в HTML на JS

Задача. На всех формах где есть поле ввода для телефона добавить ввод номера по маске.

Решение. Используем плагин для jQuery «Masked Input Plugin for jQuery». Соответственно, jQuery уже должен быть подключен.

Как проверить ввод адреса Email или номер телефона на JS — здесь

Алгоритм настройки маски телефоная для формы:

Скачать библиотеку и загрузить файл плагина 'jquery.maskedinput.min.js' на сервер.
Подключить библиотеку.
Добавить скрипт с настройками для каких форм применять.

Ниже Код #1 для WordPress и Код #2 — вариант для вставки в HTML.

</p>
<p># 2 Подключение скрипта<br />
function qfurs_add_scripts() {<br />
	// Подключение файла из ‘js’ в папке темы сайта<br />
	wp_enqueue_script( ‘maskedinput’, get_template_directory_uri() . ‘/js/jquery.maskedinput.min.js’, array(‘jquery’) );<br />
}<br />
add_action( ‘wp_enqueue_scripts’, ‘qfurs_add_scripts’ );</p>
<p># 3 Скрипт с настроки/подключения маски<br />
/*<br />
	Возможно лучшим вариантом будет добавить скрипт<br />
	в файл со своими кастомными скриптами<br />
*/<br />
function qfurs_maskedinput (){<br />
	?><br />
	<script type=”text/javascript”><br />
		jQuery(document).ready(function($) {<br />
			$(‘input[type=”tel”]’).mask(“+7-(999)-999-9999″,{placeholder:” “});<br />
		});<br />
	</script><br />
	<?php<br />
}<br />
add_action( ‘wp_footer’, ‘qfurs_maskedinput’ );</p>
<p>

# 2 Подключение скрипта

function qfurs_add_scripts() {

// Подключение файла из ‘js’ в папке темы сайта

wp_enqueue_script( ‘maskedinput’, get_template_directory_uri() . ‘/js/jquery.maskedinput.min.js’, array(‘jquery’) );

}

add_action( ‘wp_enqueue_scripts’, ‘qfurs_add_scripts’ );

# 3 Скрипт с настроки/подключения маски

Возможно лучшим вариантом будет добавить скрипт

в файл со своими кастомными скриптами

function qfurs_maskedinput (){

jQuery(document).ready(function($) {

$(‘input[type=”tel”]’).mask(“+7-(999)-999-9999”,{placeholder:” “});

});

</script>

<?php

}

add_action( ‘wp_footer’, ‘qfurs_maskedinput’ );

Код #1: Подключение библиотеки маски телефона для WordPress

</p>
<p><!– jQuery, если еще нет –><br />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script></p>
<p><!– jQuery библиотека маски телефона –><br />
<script type=”text/javascript” src=”https://mysite.net/js/jquery.maskedinput.min.js”></script></p>
<p><!– Подключение маски телефона к полю формы –><br />
<script type=”text/javascript”><br />
	jQuery(document).ready(function($) {<br />
		$(‘input[type=”tel”]’).mask(“+7-(999)-999-9999″,{placeholder:” “});<br />
		// Или по классу и id<br />
		$(‘.class-phone’).mask(“+7-(999)-999-9999″,{placeholder:” “});<br />
		$(‘#id-phone’).mask(“+7-(999)-999-9999″,{placeholder:” “});<br />
	});<br />
</script></p>
<p>

<!– jQuery, если еще нет –>

<!– jQuery библиотека маски телефона –>

<!– Подключение маски телефона к полю формы –>

jQuery(document).ready(function($) {

$(‘input[type=”tel”]’).mask(“+7-(999)-999-9999”,{placeholder:” “});

// Или по классу и id

$(‘.class-phone’).mask(“+7-(999)-999-9999”,{placeholder:” “});

$(‘#id-phone’).mask(“+7-(999)-999-9999”,{placeholder:” “});

});

</script>

Код #2: Подключение библиотеки маски телефона для сайта

Для контактной формы CF7 проще использовать способ указанный выше. Если маска нужна не для всех полей с телефоном, то при создании CF7-формы можно полю с телефоном задать конкретный класс или идентификатор. Также, можно испльзовать плагин Contact Form 7 — Маска ввода телефонного номера.

Понравилась статья?

Похожие публикации