Simple way to add watermarks to your textboxes for a little flair in your input forms
I have always used the TextBoxWatermark control that is supplied with the AjaxControlToolkit which is very easy to use and I highly recommend it. But recently I was asked to figure out a way without using 3rd party tools, hence in JavaScript. At first I figured it was going to be simple, just clear the text when you click on the box and maybe change the background color. Simple, that works. Thats when I ran into my next problem.
I wanted a textbox that was forr passwords, it would start out and say 'password' but then when you clicked on it, that would disappear and it would become a type="password" box (display text as: ******). It worked flawlessly! ...in non-crappy browsers. IE7 dumped all over my dreams yet again and left me with a Javascript error. Turns out you can't change the type property in IE7 (apparently it works in IE6???) which is completely stupid.
So, I did some good old googling which brought me here to find out that in order to change type, you now have to make an entire new object and swap it out with the old one. So after that, it works, but my focus is all screwed up: I click on the blank, the password text disappears, but the cursor is not in the textbox I just clicked?! That brought me here which showed me a crazy way to reset focus on a lost object:
window.tempObject = newObject;
setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);
Now everything seems to work just fine. BUT, they aren't. For one thing, I had had an onblur statement in my textbox originally (not in the example, but for discussion purposes) and since the new object did not have an onblur, I had to make sure to re-add that back in. Also, the same loss goes for CSS class, but that might want to change, so I added a new field into the function to take into account a new CSS class. If it is left blank, it will inherit the old CSS class if there is one, or simply have no class like Britney Spears.
Ok, so I *thought* that would be easy, but IE comes back again to spite me. For most browsers, you can set Object.setAttribute("onblur", "JSmethod") but IE decides that isn't good enough, so you have to to this Object.onblur = function(){js_function(god, damnit, ie);}; (from this thread). Ok, now that we have that fixed, we can look at the CSS class. It's mostly the same, but this is yet another IE specific problem. You need to include two different declarations: Object.setAttribute("class", "css_class"); for most browsers and Object.setAttribute("className", "css_class"); for IE. This time the IE fix/hack will not work for cross-browser compatibility. So here is the finished JS:
function makePassword(oldObject, newClass)
{
//newclass is the new css class to pass to the textbox
//otherwise leave it blank ('') to inherit it's old class
//or if there isn't one, have no class
var newObject = document.createElement('input');
//only switched to password if the original text was password
newObject.type = (oldObject.value == 'password')?'password':'text';
if(oldObject.id) newObject.id = oldObject.id;
/// this decided whether to keep the old class or get a new one
var cssClass = (oldObject.className && newClass.length < 1)?oldObject.className:newClass;
newObject.setAttribute('className', cssClass);// for IE
newObject.setAttribute('class', cssClass);// for others (these are both needed)
//the following is hard coded to add onblur functionality to the control
//newObject.setAttribute('onblur', 'blurred(this)');// this would work if it wasn't for IE
newObject.onblur = function(){blurred(this,newClass);}; // because of IE
oldObject.parentNode.replaceChild(newObject,oldObject);//this is necessary because of IE
//this is needed since a focus() will only work the second time since it happens too 'soon'
window.tempObject = newObject;
setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);
}
Remember though that you will have to validate that the original values are not in the textboxes when the user submits, as they will not be empty initially. Here is a fully working example to mess with, it shows how to use it both for a simple watermark/mask and also with a password field change. It also includes how to add javascript function calls and deal with changing (or persistent) css: