I was working on a design the other day that only had text fields with no labels, the label was in the text field and would disappear when clicked on. Then I came to the password fields and was a little stumped as how to solve this, as any value in a password field is displayed as dots, not text.

I was thinking about using an overlay, but that got too complicated. I figured out a way to do this with JavaScript, basically write a function that on page load converts all password fields to text, but when they get focus they are cleared and the type is set back to type “password”. It worked like a charm.

The code I created is specific to the website I was working on, but I’m pasting it here anyway in case it might be some help to someone.

function doClear( o ) {
function setValue( o, myText ) {
if ( o.value == myText ) {
o.value = ”;
}
else if ( o.value == ” ) o.value = myText;
}
switch ( o.id ) {
case “username”: {
var myText = ‘Enter Username’;
break;
}
case “password”: {
var myText = ‘Enter Password’;
o.type = ‘password’;
break;
}
case “su_emailAddress”: {
var myText = ‘Your Email Address’;
break;
}
case “su_username”: {
var myText = ‘Choose a Username’;
break;
}
case “newsletterEmail”: {
var myText = ‘Enter Email Address’;
break;
}
case “su_password”: {
var myText = ‘Choose Password’;
o.type = ‘password’;
break;
}
case “su_passwordConfirm”: {
var myText = ‘Confirm Password’;
o.type = ‘password’;
break;
}
}
setValue( o, myText );
}

function displayPasswordValue( id ) {
var passwordElement = document.getElementById( id );
passwordElement.type = “text”;
}
function passwordInit() {
displayPasswordValue( ‘password’ );
displayPasswordValue( ’su_password’ );
displayPasswordValue( ’su_passwordConfirm’ );
}
YAHOO.util.Event.onDOMReady( passwordInit );

Sometimes you get passed a string from XML and it can contain HTML entities like the following

&
<
>
"
©
®
«
»
'

If you write the string with JavaScript then you get something like didn't instead of didn’t

I’ve searched around for a function that could handle this but could not find one, so I wrote my own. I thought I’d share it with the world!

The following will convert & to &, convert ' to ‘ etc.

Following is the code, if you need help implementing it, I’m more than happy to explain how you install and run this function in return for a text link on your website, now that’s cheap as, considering I normally charge $140 an hour

String.prototype.trim = function () {
	return this.split( /\s/ ).join( " " );
}
String.prototype.convertHTMLEntity = function () {
	var myString = this;
	myString = myString.replace( /\&/g, '&' );
	myString = myString.replace( /\&lt;/g, '<' );
	myString = myString.replace( /\&quot;/g, '"' );
	myString = myString.replace( /\&copy;/g, '©' );
	myString = myString.replace( /\&reg;/g, '®' );
	myString = myString.replace( /\&laquo;/g, '«' );
	myString = myString.replace( /\&raqou;/g, '»' );
	myString = myString.replace( /\&apos;/g, "'" );
	return myString;
}

I’ve written a JavaScript function a while ago that converts Microsoft Word Characters (crap) to valid HTML characters. Till today I didn’t realize how valuable the function is, it could probably do with some expansion on what it converts so any help to improve is much appreciated.

For those needing the function, just send me an email or leave a comment.

/*
	‘ = 8216 convert to '
	’ = 8217 convert to '
	“ = 8220 convert to "
	” = 8221 convert to "

	bullet points from word: 61558, 8226, 61607
	convert them all to 111

	dash 8211 convert to -

	... 8230 convert to ...

	trademark symbol 8482 convert to TM

	copyright symbol 169 convert to (c)

	registered symbol 174 convert to (r)

	>> 187 convert to >>

	<< 171 convert to <<

/


function convertCharacter( obj ) {
	var myRegEx = new RegExp( String.fromCharCode( 8216 )
 + "|" + String.fromCharCode( 8217 ), "g" );
	obj.value = obj.value.replace( myRegEx, "'" );
	var myRegEx = new RegExp( String.fromCharCode( 8220 )
 + "|" + String.fromCharCode( 8221 ), "g" );
	obj.value = obj.value.replace( myRegEx, '"' );

	var myRegEx = new RegExp( String.fromCharCode( 61558 )
 + "|" + String.fromCharCode( 8226 ) + "|"
+ String.fromCharCode( 61607 ), "g" );
	obj.value =
obj.value.replace( myRegEx, String.fromCharCode( 111 ) );

	var myRegEx = new RegExp( String.fromCharCode( 8211 ), "g" );
	obj.value = obj.value.replace( myRegEx, "-" );

	var myRegEx = new RegExp( String.fromCharCode( 8230 ), "g" );
	obj.value = obj.value.replace( myRegEx, "..." );

	var myRegEx = new RegExp( String.fromCharCode( 8482 ), "g" );
	obj.value = obj.value.replace( myRegEx, "TM" );

	var myRegEx = new RegExp( String.fromCharCode( 169 ), "g" );
	obj.value = obj.value.replace( myRegEx, "(c)" );

	var myRegEx = new RegExp( String.fromCharCode( 174 ), "g" );
	obj.value = obj.value.replace( myRegEx, "(r)" );

	var myRegEx = new RegExp( String.fromCharCode( 187 ), "g" );
	obj.value = obj.value.replace( myRegEx, ">>" );

	var myRegEx = new RegExp( String.fromCharCode( 171 ), "g" );
	obj.value = obj.value.replace( myRegEx, "<<" );
}