Skip to content

Instantly share code, notes, and snippets.

@richardhughes260
Created October 22, 2012 22:09
Show Gist options
  • Save richardhughes260/3934912 to your computer and use it in GitHub Desktop.
Save richardhughes260/3934912 to your computer and use it in GitHub Desktop.
My modifications to jquery.myPass-1.0.js
/* ---------------------------------------------------------------------------------------------
* myPass v1.0 - jQuery password-hiding iPhone-Style
*
* Copyright (c) 2009 Oliver Storm, Stefan Huissel( http://www.mysrc.de )
* Feel free to redistribute the script/modify it, as
* long as you leave my infos at the top.
*
*
* Date Thu, 30 Jun 2009
*
* Defaults: charReplace -> Unicode for the symbol that will be displayed
* instead of the character. You can find a good overview here:
* http://www.fileformat.info/format/w3c/entitytest.htm?sort=Unicode+Character
*
* charDuration -> Duration how long the last character will be shown when no
* further input is made.
*
* bchesley 02/10/2012 - make sure your inputs have IDs that are different than their names!
* e.g. - <input type="text" name="answer" id="answerID">
*
* rhughes 10/17/2012 - added binding to paste event so pasted pws are masked
---------------------------------------------------------------------------------------------- */
(function($){
$.fn.myPass = function(options) {
var defaults = {
charReplace : '%u25CF',
charDuration : 1000
}
var opts = $.extend(defaults, options);
var aktiv = null;
$(this).each(function(){
tempField = $(this).attr('name');
$(this).attr('name','tmp_'+tempField);
$(this).parent().append('<input name="'+tempField+'" id="'+tempField+'" type="hidden" value="" />');
});
$(this).bind("keypress", function(evt) {
clearTimeout(aktiv);
var hiddenPass = '';
var currentValue = '';
if($(this).val().length > 0){
currentValue = currentValue + $(this).val().slice($(this).val().length - 1);
for (i=0; i<=$(this).val().length-1; ++i){
hiddenPass = hiddenPass + unescape(opts.charReplace);
}
lastLetter = $(this).val().charAt($(this).val().length-1);
if(lastLetter != unescape(opts.charReplace)
saveString(lastLetter,this);
}
$(this).val(hiddenPass);
aktiv = setTimeout("hideAll('" + $(this).attr('name') + "')", opts.charDuration);
}else{
currentValue = $(this).val();
var tempField = $(this).attr('name');
var hiddenID = tempField.substr(tempField.indexOf('_')+1);
$('#'+hiddenID).val('');
}
});
$(this).bind("keyup", function(evt) {
if($(this).val().length > 0){
if(evt.which == 8){
deleteLast(this);
}
}
});
// added this so that the paste event is masked
$(this).bind("paste", function(evt) {
clearTimeout(aktiv);
var hiddenPass = '';
aktiv = setTimeout("hideAll2('" + $(this).attr('name') + "')", opts.charDuration);
});
hideAll2 = function(el){
var hold = '';
//get everything including the masking
var newPaste = $('input[name='+el+']').val();
//get the name of the hidden ID
var hiddenID = el.substr(el.indexOf('_')+1);
//save the hidden value
hold = $('#'+hiddenID).val();
//set the value of the concatenated hold & the substring containing the unmasked text
$('#'+hiddenID).val(hold+newPaste.substr(hold.length, newPaste.length-hold.length));
var hiddenPass = '';
for (i=0; i<=$('input[name='+el+']').val().length-1; ++i){
hiddenPass = hiddenPass + unescape(opts.charReplace);
}
$('input[name='+el+']').val(hiddenPass);
}
hideAll = function(el){
lastLetter = $('input[name='+el+']').val().charAt($('input[name='+el+']').val().length-1);
var hiddenID = el.substr(el.indexOf('_')+1);
var tmpstr = $('#'+hiddenID).val();
$('#'+hiddenID).val(tmpstr + lastLetter);
var hiddenPass = '';
for (i=0; i<=$('input[name='+el+']').val().length-1; ++i){
hiddenPass = hiddenPass + unescape(opts.charReplace);
}
$('input[name='+el+']').val(hiddenPass);
}
saveString = function(str,el){
var tempField = $(el).attr('name');
var hiddenID = tempField.substr(tempField.indexOf('_')+1);
var tmpstr = $('#'+hiddenID).val();
$('#'+hiddenID).val(tmpstr + str);
}
deleteLast = function(el){
var tempField = $(el).attr('name');
var hiddenID = tempField.substr(tempField.indexOf('_')+1);
var tmpstr = $('#'+hiddenID).val();
var length = $('#'+hiddenID).val().length;
$('#'+hiddenID).val(tmpstr.substring(0,length-1));
}
};
})(jQuery);
@richardhughes260
Copy link
Author

I did not write this code, but I modified it so that it works with the paste event & that the backspace works properly across browsers.

@richardhughes260
Copy link
Author

One further note, with FireFox, you need to add some code on the for target to filter the masking character out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment