8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

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)
  • 在这里我保留了原始文本的轨迹,并在编辑中将 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>
  • 我会使用隐藏的输入字段来存储真实值并 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);
    }
    
  • 如果字段是隐藏的,如何触发更改事件?同样,如果可见字段是只读的,用户如何与其交互?

返回
作者最近主题: