Question

我有一个input[type=text]表单，我只想显示前几个字符，然后是相应数量的星号。例如，如果值为banana，则输入会显示ban***，但仍会提交banana。

密码字段不是解决方案，因为我想从实际值中显示一些字符数。

我在考虑保存数据属性中的值并在keydown上添加/删除，更新为模糊星号，并在提交时更改值但担心这可能会变得混乱。我使用的是jQuery，所以我也可以使用任何可能的插件。

Answer 1

我会使用隐藏的输入字段来存储实际值并向其添加onchange - 侦听器。因此，当它获得更新时，可见字段将获得更新。必须触发此功能onLoad至

HTML

<input type="hidden" name="realField" value="banana" onChange="update()">
<input type="text" readonly="readonly">

JS

function update(){
  var text = $('input[name=realField]').val();
  var s = '';
  for(var i=3; i<text.length; ++i){
    s+='*';
  }
  text = text.substr(0, Math.min(text.length, 3)) + s;
  $('input[name=realField] + input').val(text);
}

Answer 2

这里我保留了原始文本的跟踪，在编辑中我将3之后的字符更改为密码字符。

然后将正确的密码存储在数据属性data-orig中，然后在提交数据时可以读取该密码。

const i = $("input");

i.on("input", function () {
  const $t = $(this);
  const orig = $t.attr("data-orig") || "";  
  const v = $t.val().split("");
  for (l = 1; l < orig.length && l < v.length; l += 1) {
    v[l] = orig[l];
  }
  $t.attr("data-orig", v.join(""));
  for (l = 3; l < v.length; l += 1) {
    v[l] = "●";
  }
  $t.val(v.join(""));  
});

$("button").on("click", function () {
  console.log(i.attr("data-orig"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

<button>Get pwd</button>

显示几个字符后屏蔽输入值

2 个答案: