8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. asp.net
  3. 显示几个字符后屏蔽输入值

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

Enrique Ferolino 2月前
47 0

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

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

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

我原本想将值保存在数据属性中，并在按下键盘时添加/删除，在模糊时更新为星号，并在提交时更改值，但担心这可能会变得混乱。我使用的是 jQuery，因此我愿意接受任何可能存在的插件。

帖子版权声明 1、本帖标题：显示几个字符后屏蔽输入值
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Enrique Ferolino在本站《asp.net》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 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>
  • 引用 3楼

    我会使用隐藏的输入字段来存储真实值并 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);
}
  • 引用 4楼

    如果字段是隐藏的，如何触发更改事件？同样，如果可见字段是只读的，用户如何与其交互？

返回
作者最近主题：