Как замаскировать все, кроме последней цифры - PullRequest
Новая
       23

Как замаскировать все, кроме последней цифры

0 голосов
/ 10 мая 2019

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

$(document).ready(function() {
    var options = {
        onKeyPress: function(value, event, currentField, options) {
            var fieldVal = currentField.val();
            var star = '';
            for (var i = 0; i < fieldVal.length - 1; i++) {
                star += '*';
            }
            currentField.val(currentField.val().replace(/(.)(?!$)/g, star));
        }
    }
    $('.phone').mask('00000', options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
<div>
    <input type="text" class="phone" />
</div>

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Я бы предложил использовать здесь regex, нет необходимости в jquery.mask. 

$("input[name='phone']").keyup(function() {
    $(this).val($(this).val().replace(/[^\d\*]/g, '').replace(/\d(?=\d{1})/g,'*'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" class="phone" name="phone" />
</div>
1 голос
/ 10 мая 2019

Проблема, с которой вы сталкиваетесь, связана с примененным mask, вы используете 00000, а 0 принимает только цифру в качестве ввода в этой позиции. Вам нужно будет добавить пользовательский перевод, как указано здесь , в опциях.

Для генерации нового значения ввода я буду использовать String.replace () с пользовательской функцией замены , чтобы заменить все символы на *, кроме последнего.

Пример: 

$(document).ready(function()
{
    var options = {
        translation: {0: {pattern: /[0-9*]/}},
        onKeyPress: function(val, evt, currField, options)
        {
            let newVal = val.replace(/./g, (m, o, str) => (o !== str.length - 1 ? '*' : m));
            currField.val(newVal);
        }
    };

    $('.phone').mask('00000', options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>
<div>
    <input type="text" class="phone" />
</div>
...