<!DOCTYPE html>
<!-- demo/password_reveal_inform.html -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* STYLE SHEET, AS NEEDED, HERE */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#pwinput").focus();
$("#pwcheck").click(function(){
if ($("#pwcheck").is(":checked"))
{
$("#pwinput").clone()
.attr("type", "text").insertAfter("#pwinput")
.prev().remove();
}
else
{
$("#pwinput").clone()
.attr("type","password").insertAfter("#pwinput")
.prev().remove();
}
});
});
</script>
<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>
<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>
<p>
<input type="password" id="pwinput" placeholder="Enter Password" />
<input type="checkbox" id="pwcheck" />Show Password
</p>
</body>
</html>
<!DOCTYPE html>
<!-- demo/password_reveal_intext.html -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#pwtext{
font-weight:bold;
background-color:yellow;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#pwinput").focus();
$("#pwcheck").click(function(){
var pw = $("#pwinput").val();
if ($("#pwcheck").is(":checked"))
{
$("#pwtext").text(pw);
}
else
{
$("#pwtext").text("");
}
});
});
</script>
<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>
<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>
<p>
<input type="password" id="pwinput" placeholder="Enter Password" />
<input type="checkbox" id="pwcheck" />Show Password <span id="pwtext"></span>
</p>
</body>
</html>
<?php // demo/password_reveal_intype.php
/**
* Demonstrate how to reveal only the last character of a password
* as it is being typed, similar to the way Apple devices work
*
* Using paste to collect input strings
* Using keypress to collect input characters
* Using keyup to handle backspace
*/
error_reporting(E_ALL);
$req = NULL;
if (!empty($_POST)) $req = print_r($_POST, TRUE);
$html = <<<EOD
<!DOCTYPE html>
<!-- demo/password_reveal_intype.html -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* Stype Sheet Here */
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
/* Clear Extraneous Display-Only Input on Submit */
function pw_clear_input(){
$("#pwinput").remove();
}
$(document).ready(function(){
/* Only One Input Control on this Page */
$("#pwinput").focus();
/* Handle "Paste" Functionality */
$("#pwinput").on("paste", function(event){
var star = "*", hidn, text, long, char;
var clip = undefined;
event.preventDefault();
/* The Prior Input, if Any */
hidn = $("#pwhiddn").val();
/* Capture Clipboard before Paste Finishes */
if (window.clipboardData && window.clipboardData.getData){ // IE
clip = window.clipboardData.getData('Text');
}
else{
var clipboardData = (event.originalEvent || event).clipboardData;
if (clipboardData && clipboardData.getData){
clip = clipboardData.getData('text/plain');
}
}
/* Concatenate Clipboard to Existing Input (if any) and Save in Hidden Element */
hidn = hidn + clip;
$("#pwhiddn").val(hidn);
/* Create Obscured Password - Last Character Showing */
long = hidn.length - 1;
char = hidn.substr(long,1);
text = star.repeat(long) + char;
$("#pwinput").val(text);
});
/* Handle Each New Character of Input */
$("#pwinput").on("keypress", function(event){
var star = "*", hidn, text, long, char;
// Ignore Backspace, Return (Enter), End, Delete Keys */
if (event.which == 8) return;
if (event.which == 10) return;
if (event.which == 13) return;
if (event.which == 35) return;
if (event.which == 46) return;
event.preventDefault();
/* The Prior Input, if Any */
hidn = $("#pwhiddn").val();
char = String.fromCharCode(event.which);
/* Concatenate Character to Existing Input (if any) and Save in Hidden Element */
hidn = hidn + char;
$("#pwhiddn").val(hidn);
/* Create Obscured Password - Last Character Showing */
long = hidn.length - 1;
char = hidn.substr(long,1);
text = star.repeat(long) + char;
$("#pwinput").val(text);
});
/* Handle Backspace Character(s) */
$("#pwinput").on("keyup", function(event){
var star = "*", hidn, text, long, char;
if (event.which != 8) return; // Only handle backspace
event.preventDefault();
/* The Prior Input, if Any */
hidn = $("#pwhiddn").val();
/* Remove Character from Existing Input (if any) and Save in Hidden Element */
long = hidn.length - 1;
if (long >= 0){
hidn = hidn.substr(0,long);
$("#pwhiddn").val(hidn);
}
/* Create Obscured Password - Only last Character Showing */
long = hidn.length - 1;
if (long >= 0){
char = hidn.substr(long,1);
text = star.repeat(long) + char;
}
$("#pwinput").val(text);
});
});
</script>
<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>
<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>
<p>
$req
<form id="pwform" method="post" onSubmit="return pw_clear_input()">
<input name="pw_4_display" id="pwinput" placeholder="Enter Password" type="text" autocomplete="off" />
<input name="pw_4_action" id="pwhiddn" type="hidden" />
</form>
</p>
</body>
</html>
EOD;
echo $html;
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)