philoye · October 11, 2010 06:32
diff --git a/index.html b/index.html
 <!-- 
  
  This is a bit of jquery that enables a show/hide password toggle.
  The idea is:
    1. Reduce annoyance: Users don't have to type password twice to confirm
    2. Reduce errors: Users have option of seeing what they type
    3. Security: Users can prevent others seeing their password
  
  Ultimately, I didn't use it, but in case it might be useful to somebody.
  I didn't bother to make a proper plugin out of it, but that would be trivial...

  You can preview this by visiting: http://bl.ocks.org/620113

 -->

 <!doctype html>
 <html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Show/hide password toggle</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".password-toggle").bind("change keydown", function() {
        var $field = $(this),
            $toggle = $field.next(".password-toggle"),
            toggleLabel;
        ($field.attr("type") == "text") ? toggleLabel = "Hide password" : toggleLabel = "Show password";
        if ($field.val().length >= 0 && $toggle.size() == 0) {
          $field.after("<a href='#' class='password-toggle'>"+ toggleLabel+ "</a>");
        } else if ($field.val().length == 0 && $toggle.size()>0) {
          $("#password-toggle").remove();
        }
      });
      $(".password-toggle").live('click', function(){
        var $e = $(this);
        var $p = $(this).prev();
        if ($e.text() == "Hide password") {
          $e.text('Show password');
          $p.detach().attr('type','password').insertBefore($e);
        } else {
          $e.text('Hide password');
          $p.detach().attr('type','text').insertBefore($e);
        }
        return false;
      });
    });
  </script>
 </head>
 <body>
  <form>
    <p>Choose a password: <input type="password" class="password-toggle"></p>
    <p>Choose a password: <input type="text" class="password-toggle"></p>
  </form>
 </body>
 </html>
	<!--

	This is a bit of jquery that enables a show/hide password toggle.
	The idea is:
	1. Reduce annoyance: Users don't have to type password twice to confirm
	2. Reduce errors: Users have option of seeing what they type
	3. Security: Users can prevent others seeing their password

	Ultimately, I didn't use it, but in case it might be useful to somebody.
	I didn't bother to make a proper plugin out of it, but that would be trivial...

	You can preview this by visiting: http://bl.ocks.org/620113

	-->

	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Show/hide password toggle</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	$(".password-toggle").bind("change keydown", function() {
	var $field = $(this),
	$toggle = $field.next(".password-toggle"),
	toggleLabel;
	($field.attr("type") == "text") ? toggleLabel = "Hide password" : toggleLabel = "Show password";
	if ($field.val().length >= 0 && $toggle.size() == 0) {
	$field.after("<a href='#' class='password-toggle'>"+ toggleLabel+ "</a>");
	} else if ($field.val().length == 0 && $toggle.size()>0) {
	$("#password-toggle").remove();
	}
	});
	$(".password-toggle").live('click', function(){
	var $e = $(this);
	var $p = $(this).prev();
	if ($e.text() == "Hide password") {
	$e.text('Show password');
	$p.detach().attr('type','password').insertBefore($e);
	} else {
	$e.text('Hide password');
	$p.detach().attr('type','text').insertBefore($e);
	}
	return false;
	});
	});
	</script>
	</head>
	<body>
	<form>
	<p>Choose a password: <input type="password" class="password-toggle"></p>
	<p>Choose a password: <input type="text" class="password-toggle"></p>
	</form>
	</body>
	</html>