Skip to content

Instantly share code, notes, and snippets.

@alexey-bass

alexey-bass/show-password-jquery.html

Created May 17, 2010 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexey-bass/403970 to your computer and use it in GitHub Desktop.
Save alexey-bass/403970 to your computer and use it in GitHub Desktop.
Download ZIP
Show typing password in browser with Prototype and jQuery (the ugly way)
Raw
show-password-jquery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Show password with jQuery</title>
</head>
<body>
<p>jQuery 1.4.2</p>
<p>Tested in Windows 7 with Google Chrome 4.1.249.1064, Mozilla Firefox 3.6.3, Opera 10.53 and Internet Explorer 8.0.7600.16385</p>
<div>
Password
<span><input type="password" name="password" value="" /></span>
<label><input type="checkbox" /> Show</label>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
$('input[type=checkbox]').click(function()
{
var oldInput = $('input[type!=checkbox]')
, newInputHtml = oldInput.parent().html().replace(/type\=[a-z\'\"]+/, 'type="'+ ($(this).is(':checked') ? 'text' : 'password') +'"')
.replace(/value\=\"[^\"]*\"/, 'value="'+ oldInput.val() +'"');
oldInput.replaceWith($(newInputHtml));
});
});
//]]>
</script>
</body>
</html>
Raw
show-password-prototype.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Show password with Prototype</title>
</head>
<body>
<p>Prototype v1.6.1</p>
<p>Tested in Windows 7 with Google Chrome 4.1.249.1064, Mozilla Firefox 3.6.3, Opera 10.53 and Internet Explorer 8.0.7600.16385</p>
<div>
Password
<span><input type="password" name="password" value="" /></span>
<label><input type="checkbox" /> Show</label>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
document.observe('dom:loaded', function()
{
$$('input')[1].observe('click', function(event)
{
var oldInput = $$('input')[0]
, newInputHtml = oldInput.up().innerHTML.replace(/type\=[a-z\'\"]+/, 'type="'+ (Event.element(event).match(':checked') ? 'text' : 'password') +'"')
.replace(/value\=\"[^\"]*\"/, 'value="'+ $F(oldInput) +'"');
oldInput.up().update(newInputHtml);
});
});
//]]>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment