屏蔽输入任何字段和值

Question

我想知道如何获取输入的长度并替换值开始和结束之间的所有内容，但保留 2 个字符和两端。

我不想预定义长度，因为我希望它可以处理具有任何值的任何输入，并且在提交表单时仍然能够使用 PHP 读取值。

输入： Hello world street 12 输出： He*** ***** ****** 12

输入： 185445414631 输出： 18********31

Js 库: https://github.com/igorescobar/jQuery-Mask-Plugin

我的代码： https://jsfiddle.net/k4y0ctho/1/

Answer 1

如果您的输出在其他领域是可以接受的，这可能会有用

$("#input").on("keyup", function() {
 
  var input = $(this).val().split("")
  var res = $.map(input, (el, ix) => {
    return ix < 2 || ix > input.length - 3? el:"*"
  })

  $("#output").html(res.join(""));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="password" id="input" />
<br><span id="output"></span>

Answer 2

如果您正在使用 jQuery，您可以做的是：

// Util function to mask the value
function maskValue(value) {
    if (typeof value !== 'string' || value.length <= 4) {
        return value;
    }
    return value.split('').map((v, i) => { return (i > 1 && i < value.length - 2 ? '*' : v); }).join('');
}

// actual value (not masked)
let actualValue = '';

// keyup event to handle new input and mask the value
$("#my-input").on("keyup", function(event) {
    if (event.key === 'Backspace') {
        actualValue = actualValue.substring(0, actualValue.length - 1);
    }
    else {
        actualValue += event.key;
    }
    $('#my-input').val(maskValue(actualValue));
});

请记住，这并不完美，因为它仅支持普通键（字母、数字、符号）和退格键。

屏蔽输入任何字段和值

Masking inputs any field and values

html

jquery

masking