使用jquery在密码字段中屏蔽密码

如何在Android手机中进行密码屏蔽，就像我们输入密钥一样，它会显示几秒钟的密钥并将其更改为“*”。 我尝试使用密码屏蔽中提到的插件， 因为在使用js的移动设备中它不是最佳的。 并且jsfiddle http://jsfiddle.net/medopal/X37Wz/无法处理退格和删除。 你能建议其他任何方法吗？ 仅使用jquery而不使用插件。

Answer 1

在这里，我已完成上述查询的完整解决方案箱。 请查看以下给出的演示链接：

演示： http ： //codebins.com/bin/4ldqp8u

HTML：

 
   
 KeyCode Pressed:   
  

JQuery的：

 $(function() { //Extends JQuery Methods to get current cursor postion in input text. //GET CURSOR POSITION jQuery.fn.getCursorPosition = function() { if (this.lengh == 0) return -1; return $(this).getSelectionStart(); } jQuery.fn.getSelectionStart = function() { if (this.lengh == 0) return -1; input = this[0]; var pos = input.value.length; if (input.createTextRange) { var r = document.selection.createRange().duplicate(); r.moveEnd('character', input.value.length); if (r.text == '') pos = input.value.length; pos = input.value.lastIndexOf(r.text); } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart; return pos; } //Bind Key Press event with password field $("#txtpwd").keypress(function(e) { setTimeout(function() { maskPassword(e) }, 500); }); }); function generateStars(n) { var stars = ''; for (var i = 0; i < n; i++) { stars += '*'; } return stars; } function maskPassword(e) { var text = $('#txthidden').val().trim(); var stars = $('#txthidden').val().trim().length; var unicode = e.keyCode ? e.keyCode : e.charCode; $("#keycode").html(unicode); //Get Current Cursor Position on Password Textbox var curPos = $("#txtpwd").getCursorPosition(); var PwdLength = $("#txtpwd").val().trim().length; if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) { //If NOT  OR  Then... if (unicode != 8 && unicode != 46) { text = text + String.fromCharCode(unicode); stars += 1; } //If Press  Or  Then... else if ((unicode == 8 || unicode == 46) && stars != PwdLength) { stars -= 1; text = text.replace(text.charAt(curPos), ""); } //Set New String on both input fields $('#txthidden').val(text); $('#txtpwd').val(generateStars(stars)); } } 

演示： http ： //codebins.com/bin/4ldqp8u

Answer 2

基于上面的codebins.com代码中的keyur，这个很棒的小答案在这里https://stackoverflow.com/a/4843500/1056285以及https://stackoverflow.com/a/1431109/1056285 （用于使退格实际删除没有错误）我调整了解决方案，以考虑退格！

 $(function() { //Extends JQuery Methods to get current cursor postion in input text. //GET CURSOR POSITION jQuery.fn.getCursorPosition = function() { if (this.lengh == 0) return -1; return $(this).getSelectionStart(); } jQuery.fn.getSelectionStart = function() { if (this.lengh == 0) return -1; input = this[0]; var pos = input.value.length; if (input.createTextRange) { var r = document.selection.createRange().duplicate(); r.moveEnd('character', input.value.length); if (r.text == '') pos = input.value.length; pos = input.value.lastIndexOf(r.text); } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart; return pos; } //Bind Key Press event with password field $("#txtpwd").keypress(function(e) { setTimeout(function() { maskPassword(e) }, 500); }); $("#txtpwd").keydown(function(e) { if (e.keyCode == 8) { setTimeout(function() { maskPassword(e) }, 1); } }); }); function generateStars(n) { var stars = ''; for (var i = 0; i < n; i++) { stars += '*'; } return stars; } function maskPassword(e) { var text = $('#txthidden').val(); var stars = $('#txthidden').val().length; var unicode = e.keyCode ? e.keyCode : e.charCode; $("#keycode").html(unicode); //Get Current Cursor Position on Password Textbox var curPos = $("#txtpwd").getCursorPosition(); var PwdLength = $("#txtpwd").val().length; if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) { //If NOT  OR  Then... if (unicode != 8 && unicode != 46) { text = text + String.fromCharCode(unicode); stars += 1; } //If Press  Or  Then... else if ((unicode == 8 || unicode == 46) && stars != PwdLength) { stars -= 1; text = text.substr(0, curPos) + text.substr(curPos + 1); } //Set New String on both input fields $('#txthidden').val(text); $('#txtpwd').val(generateStars(stars)); } } 

您可以在下面查看： http ： //codebins.com/bin/4ldqp8u/38

Answer 3

IE 10具有该function。 可能有人可以把它扯掉？ ：|

另外，我在这里编写了一个简单的代码片段，可以让你开始编写自己的代码。

编辑：在这里查看代码：

 
 
 
 Show