Не подключается inputmask на JavaScript. Как подключить inputmask. Разница между maskedinput.

Inputmask это специальный плагин на основе библиотеки jQuery. Его часто путают с плагином maskedinput. Надо понимать, что это два разных плагина, основные различия между ними заключается в функциональности, поддержке разработчиками и конечно же синтаксисе.

Итак, рассмотрим каждый из них на примерах:

1. Maskedinput

- пример с подстановкой маски (демо):

- ссылка на github: github.com/digitalBush/jquery.maskedinput, по данному адресу рассмотрены базовые примеры написания и использование;

- основная маска:

$('#phone').mask('(044)-999-99-99');  

- реализация:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!--Подключаем библиотеку-->
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.min.js"></script>
</head>
<body>
<input id="phone3" type="text" placeholder="(044) __-__-__">
<form name="myForm">
  <input type="radio" name="maskedinput" id="radioPhone" checked="checked" />
  <input type="radio" name="maskedinput" id="radioEmail" />
</form>
</body>
<script>	
$(document).ready(function () {
	$("#phone3").mask('(999) 999-99-99');
});
$( "#radioPhone" ).click(function() {
	$("#phone3").val('');
	$("#phone3").mask('(999) 999-99-99');
	$("#phone3").attr('placeholder', '(044) __-__-__');
});
$( "#radioEmail" ).click(function() {
	$("#phone3").val('');
	$("#phone3").attr('placeholder', '______@______');
	$("#phone3").unmask('(999) 999-99-99');
});
</script>
</html>

- maskedinput довольно популярный плагин, поддерживается всеми популярными браузерами даже Internet Explorer, правда, поддержка плагина остановилась, - последние изменения в репозиторий github были внесены в 2015 году

2. Inputmask

- пример с подстановкой маски:

- ссылка на github.com/RobinHerbots/Inputmask, по данному адресу рассмотрены базовые примеры написания и использование;

- основная маска:

$('#phone').inputmask('(044)-999-99-99');  

- реализация:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!--Подключаем библиотеку-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

</head>
<body>

<input id="phone2" type="text" placeholder="(044) __-__-__">

<form name="myForm">
  <input type="radio" name="inputmask" id="radioPhoneMask" checked="checked" />
  <input type="radio" name="inputmask" id="radioEmailMask" />
</form>

</body>
<script>	
$(document).ready(function () {
	$("#phone2").inputmask('(999) 999-99-99');
});
$( "#radioPhoneMask" ).click(function() {
	$("#phone2").val('');
	$("#phone2").inputmask('(999) 999-99-99');
	$("#phone2").attr('placeholder', '(044) __-__-__');
});

$( "#radioEmailMask" ).click(function() {
	$("#phone2").val('');
	$("#phone2").attr('placeholder', '______@______');
	$("#phone2").inputmask('remove');
});

</script>

</html>

- inputmask популярный плагин, который поддерживается всеми браузерами, активно поддерживается сообществом разработчиков.

Добавить комментарий