Как в одном input для email совместить плагин inputmask и проверку запрещенных символов, которая покажет неправильный символ и сразу удаляет его
Есть плагин inputmask который запрещает любой ввод кроме определенных символов и создает маску '_ @ _ . _' Нужно совместить со скриптом который запрещает любой ввод запрещенных символов, но при этом показывает что это был за символ и сразу стирает его. код скрипта:
$(document).ready(function() {
$('#mailFirst').focus(function() {
$(this).attr('placeholder', '');
});
$('#mailFirst').blur(function() {
$(this).attr('placeholder', 'Ваш E-mail');
});
$('#mailFirst').keyup(function() {
this.value = this.value.replace(/[^a-zA-Z0-9@\-.]/i, "");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="mailFirst" class="mail first" placeholder="Ваш E-mail" type="text">Ответы (1 шт):
Автор решения: frozencoast
→ Ссылка
Как вариант:
$(function() {
let $input = $('#mailSecond');
let cursor = $input[0].selectionStart;
let prev = $input.val();
$input.inputmask({
mask: "*{1,50}[.*{1,50}][.*{1,50}]@*{1,50}.*{1,20}[.*{1,20}][.*{1,20}]",
greedy: false,
clearIncomplete: true,
showMaskOnHover: false,
definitions: {
'*': {
validator: "[^_@.]"
}
}
}).on('keyup paste', function() {
if (this.value && /[^_a-zA-Z0-9@\-.]/i.test(this.value)) {
this.value = prev;
this.setSelectionRange(cursor, cursor);
$input.trigger('input');
} else {
cursor = this.selectionStart;
prev = this.value;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/[email protected]/dist/jquery.inputmask.min.js"></script>
<input id="mailSecond" placeholder="Ваш E-mail" type="text">