javascript - 如何屏蔽除最后一位以外的所有内容

Question

我正在尝试使用 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>

Answer 1

您面临的问题与应用有关mask，您正在使用00000，并且 a0只接受一个数字作为该位置的输入。您需要在选项中添加自定义翻译，如此处所述。

为了生成输入的新值，我将使用带有自定义替换函数的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>

Answer 2

我建议在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>