Question

假设我有一个文本框，我希望当用户在其中键入内容时，每个字符将在1秒之后被jQuery转换为密码符号。

当我们输入密码文本框时，我们在现代智能手机上看到的效果相同。

有没有人有任何建议？我知道如何捕获按键并输入字符用户。

<input type="text" id="username" name="username" />
<script type="text/javascript">
$("#username").keypress(function(event){   

// Get the keypress value
// ...?

var c = String.fromCharCode(e.which);

}

});
</script>

Answer 1

你实际上不需要处理按键。使用1秒超时循环，并用星号替换文本框中的所有字符。并且不要忘记将字符存储在变量中。

下面的内容会对你有所帮助，但你必须花一些时间来修复bug。 http://jsfiddle.net/ymutlu/8BXDu/2/

Answer 2

你可以从那开始：http://jsfiddle.net/89CF8/7/
但只有正确输入才有效您应该将值保存在另一个变量中（我在示例中使用letters数组），因为标准输入只允许您更改星号的值，丢失所有用户的输入。

问题＃1。您应该添加非符号检查。例如，Del键会将错误符号添加到letters数组。

问题＃2。您应该添加退格检查并使用splice删除元素。

问题＃3。如果用户从文本中间删除符号，则很难将新值与存储初始值的变量同步。

毕竟，我认为这不是一个好主意，但也许我的代码可以帮助您找到更好的解决方案。

Answer 3

使用javascript的自定义掩码密码

custom mask password

    <style>
    .mask {
        position: relative;
        overflow: hidden;
    }

    input#pass {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    </style>
    <script>

var txt = document.getElementById("txtMask");
var hdn = document.getElementById("pass");


hdn.addEventListener("keyup", function(evt){

  txt.value = '';
   for(let i=0; i<hdn.value.length;i++)
       {
           txt.value +='@';
      }         

});
</script>
<div class="mask">
<input type="text" id="txtMask" autocomplete="false">
<input type="text" id="pass">
</div>

如何通过jquery将普通字符更改为密码char？

3 个答案: