Question

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

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

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

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

Js lib： 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));
});

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

屏蔽输入任何字段和值

2 个答案: