0

Есть плагин 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">
На моем тестовом сайте, 2 инпута, один со скриптом, второй с маской https://tronenko.pp.ua/mail/

1
  • Вы можете скопировать паттерн из исходников inputmask, для проверки правильности ввода. Повесить отдельно обработчик на инпут и функцией inputmask-regexp.test(value) проверять запрещённый символ, забирать его и выводить как вам угодно
    – Yugofx
    16 мая 2020 в 7:43

1 ответ 1

1

Как вариант:

$(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/Inputmask@5.0.3/dist/jquery.inputmask.min.js"></script>
<input id="mailSecond" placeholder="Ваш E-mail" type="text">

3
  • Спасибо Вам! Все именно так как я хотел, скажите а можно ли настроить так, чтобы при первом неправильном символе маска не пряталась? 16 мая 2020 в 10:01
  • Обновил пример: $input.trigger('change') заменен на $input.trigger('input') 16 мая 2020 в 10:22
  • Ну что здесь еще можно сказать? Вы действительно мастер своего дела) 17 мая 2020 в 6:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.