如何掩盖除最后一位数字外的所有内容

时间:2019-05-10 03:07:34

标签: javascript jquery jquery-mask

我正在尝试使用jquery mask屏蔽除最后一位数字以外的所有内容,但我无法做到这一点。下面是我到目前为止尝试过的。

$(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 个答案:

答案 0 :(得分:1)

您面临的问题与所应用的mask有关,您正在使用00000,而0仅接受一个数字作为该位置的输入。您将需要在选项中添加here所述的自定义翻译。

为了生成输入的新值,我将使用String.replace()和自定义replacement function来用*替换除最后一个字符以外的所有字符。

示例:

$(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>

答案 1 :(得分:1)

我建议在这里使用简单的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>