<p>In a recent project at work, I had to add in functionality so that a user could see what they had typed in a password field when they click a link. One would think that it is as easy as using JavaScript to change the type attribute, but that of course doesn’t work in IE. Virtually all of the jQuery plugins that I found used a checkbox instead of a link to toggle between the two states. So, I set out to write my own.</p>

<p>If you just want to get to the code, you can <a href="http://github.com/davist11/jQuery-Show-Password">download the plugin from GitHub</a> or <a href="//assets.trevor-davis.com/play/jquery-show-password/">check out the demo</a>.</p>

<p>This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.</p>

<h2>The Markup</h2>
<p>In the demo, we’ll just start with a simple form:</p>

<pre><code>&lt;form action="#"&gt;
	&lt;ol class="forms"&gt;
		&lt;li&gt;
			&lt;label for="username"&gt;Username&lt;/label&gt;
			&lt;input type="text" id="username" /&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;label for="password"&gt;Password&lt;/label&gt;
			&lt;input type="password" id="password" class="password" /&gt;
		&lt;/li&gt;
		&lt;li class="buttons"&gt;
			&lt;button type="submit"&gt;Submit&lt;/button&gt;
		&lt;/li&gt;
	&lt;/ol&gt;
&lt;/form&gt;</code></pre>

<h2>Add a Little Style</h2>
<p>In the design that I was working on, the link to show the password actually sat on top of the password input field, so we just need to add a little bit of CSS to make that happen:</p>

<pre><code>.forms li {
	position: relative;
}
.show-password-link {
	display: block;
	position: absolute;
	z-index: 11;
}
.password-showing {
	position: absolute;
	z-index: 10;
}</code></pre>

<p>By default, the link to show the password has the class of <em>show-password-link</em>, but that can be changed in the plugin options. Also, the <em>password-showing</em> class is added to the text field that is used to show the password, but again, that can be changed via the plugin options.</p>

<h2>And Now, JavaScript Takes Over</h2>
<p>To get started, you will need to include <a href="http://jquery.com/">jQuery</a> and <a href="http://github.com/davist11/jQuery-Show-Password">my plugin</a>:

</p><pre><code>&lt;script type="text/javascript" src="scripts/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jquery.showPassword.min.js"&gt;&lt;/script&gt;</code></pre>

<p>Then, you can instantiate it like this:</p>

<pre><code>$(document).ready(function() {
	$(':password').showPassword();
});</code></pre>

<h3>Options</h3>

<ul><li>
    <h4>linkClass: 'show-password-link'</h4>
    Class for the toggle link
  </li>
  <li>
    <h4>linkText: 'Show'</h4>
    Text for the toggle link
  </li>
  <li>
    <h4>showPasswordLinkText: 'Hide'</h4>
    Text for the toggle link when password is not masked
  </li>
  <li>
    <h4>showPasswordInputClass: 'password-showing'</h4>
    Class for the text input that will show the password
  </li>
  <li>
    <h4>linkRightOffset: 0</h4>
    Offset for the link from the right of parent
  </li>
  <li>
    <h4>linkTopOffset: 0</h4>
    Offset for the link from the top of parent
  </li>
</ul><p>So there you have it. <a href="//assets.trevor-davis.com/play/jquery-show-password/">Check out the demo</a> and <a href="http://github.com/davist11/jQuery-Show-Password">download the plugin from GitHub</a>.</p>