Execute
Save
Share
Share link
share
share
share
Team
Public Teams
Comments
0
Created By:
Guest
Title:
Password masking in jQuery
Title
Description
Edit
Copy Link
Login
Email *
Password *
Login
OR
Create Account
Screen Name *
Email *
Password *
Retype Password *
Team Access Code
Register
Public CodeBins
HELP
--Select Theme--
Ambiance
Blackboard
Cobalt
Eclipse
Elegant
Erlang-Dark
Lesser-Dark
Monokai
Neat
Night
Rubyblue
Vibrant-Ink
Xq-Dark
New CodeBin
CodeBins Versions
Password maskin- V.3
Password maskin- V.2
Password maskin- V.1
Compare Versions
Recent CodeBins
View All CodeBins
$(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)); } }
Bottom of Page
In Head
On Load
On Ready
Setting
Validate
Copy
Format
input{ border:1px solid #345699; } input:focus{ background:#ddd; }
Setting
Validate
Copy
Format
<div id="panel"> <input type="number" id="txtpwd" name="txtpwd" size="15"/> <input type="text" id="txthidden" name="txthidden" size="15"/> <div> KeyCode Pressed: <span id="keycode"> </span> </div> </div>
No Doc Type
HTML5
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.1
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
Copy
Format
Download
×
Code Description
×
Difference of Versions
HTML
CSS
JS
×
JS Error
×
CSS Error
Errors
Warnings
×
JavaScript Setting
JS Libraries:
Chrome Frame 1.0.3
Dojo 1.8.0
Dojo 1.7.3
Dojo 1.7.2
Ext Core 3.1.0
jQuery 1.8.0
jQuery 1.7.2
jQuery 1.6.0
jQuery 1.5.0
jQuery 1.4.4
jQuery 1.4.0
jQuery-min 1.7.2
jQueryUI-min 1.8.21
MooTools more-1.4.0.1-full
MooTools core-1.4.5-full
MooTools core-1.4.1-full
Prototype 1.7.1.0
script.aculo.us 1.9.0
SWFObject 2.2
Twitter Bootstrap 2.0.4
WebFont Loader 1.0.28
yui 3.5.1
User Libraries:
Upload File
JavaScript URL(s):
×
CSS Setting
CSS Libraries:
jQueryUI 1.8.21
Twitter Bootstrap 2.0.4
User Libraries:
Upload File
CSS URL(s):