password mask

by Craig Martin

HTML

<form action="/register" method="post" name="login" id="form-login" class="form-login">
		<fieldset class="input">
		<p id="form-login-username">
<!-- 
			<label for="modlgn_username">Email</label><br />
 -->
			<input id="modlgn_username" placeholder="user email" type="text" name="username" class="inputbox" alt="username" size="18">
		</p>
		<p id="form-login-password">
<!-- 
			<label for="modlgn_passwd">Password</label><br />
 -->
			<input id="modlgn_passwd" placeholder="password" type="password" name="passwd" class="inputbox" size="18" alt="password">
		</p>
				<p id="form-login-remember">
			<label for="modlgn_remember">Remember me</label>
			<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me">
		</p>
				<input type="submit" name="Submit" class="button logbut" value="Login">
	</fieldset>
	
	<ul>
		<li>
			<a href="/register?task=users.reset" target="_top">Forgot your password?</a>
		</li>
		<li>
			<a href="/register?task=users.remind" target="_top">Forgot your username?</a>
		</li>
				<li>
			<a href="/register?task=users.request_activation_mail" target="_top">Request new activation mail</a>
		</li>
						<li>
			<a href="/register?task=users.register&amp;fid=1" target="_top">Create account</a>
		</li>
			</ul>
		<input type="hidden" name="task" value="users.do_login">
		<input type="hidden" name="lret" value="L3JlZ2lzdGVy">
	</form>

JavaScript

/*******************************************************************************
 MaskedPassword.js       Converts password fields into "masked" password fields
 ------------------------------------------------------------------------------
 Adapted from                                      FormTools.addPasswordMasking
 Info/Docs         http://www.brothercake.com/site/resources/scripts/formtools/
 ------------------------------------------------------------------------------
*******************************************************************************/



//masked password constructor
function MaskedPassword(passfield, symbol)
{
	//if the browser is unsupported, silently fail
	//[pre-DOM1 browsers generally, and Opera 8 specifically]
	if(typeof document.getElementById == 'undefined'
		|| typeof document.styleSheets == 'undefined') { return false; }

	//or if the passfield doesn't exist, silently fail
	if(passfield == null) { return false; }
	
	//save the masking symbol 
	this.symbol = symbol;

	//identify Internet Explorer for a couple of conditions
	this.isIE = typeof document.uniqueID != 'undefined';
	
	//delete any default value for security (and simplicity!)
	passfield.value = '';
	passfield.defaultValue = '';

	//create a context wrapper, so that we have sole context for modifying the content
	//(ie. we can go context.innerHTML = replacement; without catering for 
	// anything else that's there besides the password field itself)
	//and give it a distinctive and underscored name, to prevent conflict
	passfield._contextwrapper = this.createContextWrapper(passfield);
	
	//create a fullmask flag which will be used from events to determine
	//whether to mask the entire password (true) 
	//or to stop at the character limit (false)
	//most events set the flag before being called, except for onpropertychange
	//which uses whatever the setting currently is
	//this used to be an argument, but onpropertychange fires from our modifications
	//as well as manual input,...