使用jquery在密码字段中进行密码屏蔽 [英] Password masking in password field using jquery
问题描述
如何在 Android 手机中进行密码屏蔽,例如当我们输入一个键时,它会显示一个键几秒钟并将其更改为*".我尝试了 密码屏蔽在手机中使用 js 中提到的插件不是最优的.而 jsfiddle http://jsfiddle.net/medopal/X37Wz/ 无法处理退格和删除.您能否建议任何其他方法来做到这一点?只使用jquery,不使用插件.
这里我已经为上述查询完成了完整的解决方案.请查看下面给出的演示链接:
演示: http://codebins.com/bin/4ldqp8u
HTML:
<div id="panel">按下的键码:<span id="keycode"></span></div></div>JQuery:
$(function() {//扩展 JQuery 方法以获取输入文本中的当前光标位置.//获取光标位置jQuery.fn.getCursorPosition = function() {如果(this.lengh == 0)返回-1;返回 $(this).getSelectionStart();}jQuery.fn.getSelectionStart = function() {如果(this.lengh == 0)返回-1;输入=这个[0];var pos = input.value.length;如果(输入.createTextRange){var r = document.selection.createRange().duplicate();r.moveEnd('字符', 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;返回位置;}//将按键事件与密码字段绑定$("#txtpwd").keypress(函数(e) {设置超时(函数(){掩码密码(e)}, 500);});});函数生成星(n){变星='';for (var i = 0; i < n; i++) {星星 += '*';}返回星星;}功能掩码密码(e){var text = $('#txthidden').val().trim();var stars = $('#txthidden').val().trim().length;var unicode = e.keyCode ?e.keyCode:e.charCode;$("#keycode").html(unicode);//获取密码文本框上的当前光标位置var curPos = $("#txtpwd").getCursorPosition();var PwdLength = $("#txtpwd").val().trim().length;if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {//如果不是<Back Space>或 <DEL>然后...if (unicode != 8 && unicode != 46) {text = text + String.fromCharCode(unicode);星星 += 1;}//如果按<Back Space>或 <DEL>然后...else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {星星-= 1;text = text.replace(text.charAt(curPos), "");}//在两个输入字段上设置新字符串$('#txthidden').val(text);$('#txtpwd').val(generateStars(stars));}}
演示: http://codebins.com/bin/4ldqp8u
How to do password masking as in Android mobile like when we type in a key it shows a key for few seconds and change it to "*".
I tried the plugin mentioned in Password masking as in mobiles using js it is not optimal. And the jsfiddle http://jsfiddle.net/medopal/X37Wz/ not able to handle backspace and delete. Could you please suggest any other methods to do this? Only using jquery and not to use plugins.
解决方案 here i have done complete solution bin for above query. please check demo link as given below:
Demo: http://codebins.com/bin/4ldqp8u
HTML:
<div id="panel">
<input type="text" id="txtpwd" name="txtpwd" size="15"/>
<input type="text" id="txthidden" name="txthidden" size="15"/>
<div>
KeyCode Pressed:
<span id="keycode">
</span>
</div>
</div>
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 <Back Space> OR <DEL> Then...
if (unicode != 8 && unicode != 46) {
text = text + String.fromCharCode(unicode);
stars += 1;
}
//If Press <Back Space> Or <DEL> 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));
}
}
Demo: http://codebins.com/bin/4ldqp8u
这篇关于使用jquery在密码字段中进行密码屏蔽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文