Skip to content

Instantly share code, notes, and snippets.

@tofeeq
Last active Jun 5, 2018
Embed
What would you like to do?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.password.js"></script>
<input type="password" name="paswd1" class="pass" />
<style type="text/css">
.iconview:before {
content: "\f099"
}
</style>
<script type="text/javascript">
$(function() {
$(".pass").xpassword({preview : true, previewFontClass : 'iconview'});
})
</script>
/*
JQuery plugin for password fields to show last typed character
author: Tofeeq ur Rehamn (tofeeq3@gmail.com)
example : $(".elem").xpassword();
*/
(function ($) {
$.fn.xpassword = function (options) {
var settings = $.extend({
preview: false,
previewFontClass: 'eye'
}, options);
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}
this.each(function () {
var $inp = $(this);
//add temporary element before input password
var timer = "";
//create a hidden text field to hold the original value what user entered
var $hiddenPass = $('<input type="hidden" />');
$inp.after($hiddenPass);
if (settings.preview) {
var $preview = $('<i class="' + settings.previewFontClass + '"></i>');
$inp.after($preview);
$preview.css({
"cursor": "pointer"
});
$preview.on('click', function () {
$inp.val($hiddenPass.val());
setTimeout(function () {
$inp.val(stars($inp.val().length));
}, 1000);
});
}
//remove name from input and add to the hidden field as this is the one
//which will have original value, input will have stars which are not readable
$hiddenPass.attr("name", $inp.attr("name"));
//remove name from input as this will be used for just display
$inp.attr("type", "text").removeAttr("name");
//get current typed character from keyboard and append it to the hidden field
$inp.on("keypress", function (e) {
var code = e.which;
if (code >= 32 && code <= 127) {
var character = String.fromCharCode(code);
if (getSelectedText().length) {
$hiddenPass.val(character);
} else {
$hiddenPass.val($hiddenPass.val() + character);
}
}
});
//convert last typed character to star
$inp.on("keyup", function (e) {
var code = e.which;
if (code == 8) {
//if removing
var length = $inp.val().length;
$hiddenPass.val($hiddenPass.val().substring(0, length));
} else if (code == 37) {
} else {
var current_val = $inp.val().length;
$inp.val(stars(current_val - 1) + $inp.val().substring(current_val -
1));
}
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
$inp.val(stars($inp.val().length));
}, 200);
});
});
function stars(n) {
var stars = "";
for (var i = 0; i < n; i++) {
stars += "*";
}
return stars;
}
return this;
}
}(jQuery));
@tofeeq

This comment has been minimized.

Copy link
Owner Author

@tofeeq tofeeq commented Jun 5, 2018

Jquery plugin for password field, showing last typed character with a preview button (icon)

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