alexey-bass/show-password-jquery.html

## 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</p>
<p>Not works in Internet Explorer 8.0.7600.16385</p>

<div>
    Password
    <input type="password" name="password" value="" />
    <label style="display: none;"><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()
{
    // fuck IE
    if (!$.browser.msie)
    {
        // show checkbox
        $('input[type=checkbox]').parent().show();

        // add handler
        $('input[type=checkbox]').click(function()
        {
            var oldInput = $('input[type!=checkbox]');

            var newInput = oldInput.clone(true)
                                   .attr('type', $(this).is(':checked') ? 'text' : 'password')
                                   .attr('value', oldInput.val());

            oldInput.replaceWith(newInput);
        });
    }
});
//]]>
</script>

</body>
</html>

## 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</p>
<p>Not works in Internet Explorer 8.0.7600.16385</p>

<div>
    Password
    <input type="password" name="password" value="" />
    <label style="display: none;"><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()
{
    // fuck IE
    if (!Prototype.Browser.IE)
    {
        // show checkbox
        $$('input')[1].up().show();

        // add handler
        $$('input')[1].observe('click', function(event)
        {
            var oldInput = $$('input')[0];

            var newInput = oldInput.clone(false)
                                   .writeAttribute('type', Event.element(event).match(':checked') ? 'text' : 'password')
                                   .writeAttribute('value', $F(oldInput));

            // instance method 'oldInput.replace(newInput)' not work for Opera, we need generic here
            // see warning at the bottom of http://api.prototypejs.org/dom/element/replace/
            Element.replace(oldInput, newInput);
        });
    }
});
//]]>
</script>

</body>
</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</p>
	<p>Not works in Internet Explorer 8.0.7600.16385</p>

	<div>
	Password
	<input type="password" name="password" value="" />
	<label style="display: none;"><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()
	{
	// fuck IE
	if (!$.browser.msie)
	{
	// show checkbox
	$('input[type=checkbox]').parent().show();

	// add handler
	$('input[type=checkbox]').click(function()
	{
	var oldInput = $('input[type!=checkbox]');

	var newInput = oldInput.clone(true)
	.attr('type', $(this).is(':checked') ? 'text' : 'password')
	.attr('value', oldInput.val());

	oldInput.replaceWith(newInput);
	});
	}
	});
	//]]>
	</script>

	</body>
	</html>