Как я могу исправить символ 'A' в маске JQuery? - PullRequest
Новая
       37

Как я могу исправить символ 'A' в маске JQuery?

2 голосов
/ 21 июня 2019

Я строю компонент почтового индекса в ASP.NET MVC, который будет глобализирован. Это означает, что в соответствии со страной поставщика в текстовом поле будет установлена ​​правильная маска почтового индекса. Проблема в том, что в некоторых странах символ «А» зафиксирован в маске. Например: почтовый индекс Андорры - «AD000» (моя маска), где AD зафиксирован, за ним следуют 3 цифры. Мой компонент является динамическим, поэтому я сохранил маски по странам в базе данных, и представление отображается, мой компонент может установить его. Но символ «A» является зарезервированным символом в JQuery-маске, что означает букву A-Z или цифру. Таким образом, когда страна Андорра, моя компания не заставляет пользователя вводить A, пользователь может положить что угодно, и я не хочу такого поведения. Что я могу сделать?

Я где-то видел, что если бы я использовал '\', следующий символ воспринимался бы как буквальный. Но это не сработало 

$('input.my-class').mask('AD000')

То, что я хочу, это когда пользователь начинает оцифровку, компонент автоматически отрисовывает AD, а затем ждет, пока пользователь введет цифры

1 Ответ

2 голосов
/ 21 июня 2019

Вы можете настроить перевод вариант.Значение по умолчанию: 

translation: {
  '0': {pattern: /\d/},
  '9': {pattern: /\d/, optional: true},
  '#': {pattern: /\d/, recursive: true},
  'A': {pattern: /[a-zA-Z0-9]/},
  'S': {pattern: /[a-zA-Z]/}
};

Вам необходимо изменить 'A' на: 

{
    translation: {
        'A': {
            pattern: /A/,
            fallback: 'A',
            optional: false
        }
    }
 }

Где отступление остается для:

Когда пользователь вводит недопустимый символ для текущей позиции, плагин заменяет его резервным, а не стирает. 

$('input.my-class').mask('AD000', {
    translation: {
        'A': {
            pattern: /A/,
            fallback: 'A',
            optional: false
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/igorescobar/jQuery-Mask-Plugin@master/dist/jquery.mask.min.js"></script>


<form>
    <input type="text" name="field-name" class="my-class" />
</form>
...