Change textbox css class onfocus

I'd like to have a textbox that changes css classes (bgcolor primarily) when the user is typing in the box (onfocus). I'd also like to have the textbox validated onblur and if the textbox is invalid change css class again.

I've accomplished all of this using maskededit and maskededitvalidator, however for a basic string entry such as a name I don't want any mask characters to be used in the textbox. My app will be used by very computer illiterate people, and I'm pretty sure having the ____ in the box or even having spaces will cause a lot of confusion and trouble so I would like to avoid that.

What is the best way for me to accomplish this? Also FYI, I'm a former ASP/javascript developer trying to make the move to .net.

Your best bet is to register a .js file in your scriptmanager's Scripts collection.

In that .js file, create a function called pageLoad() (the framework automatically wires that for you to fire when all the other html elements and ajax compoennts are done loading).

In your pageLoad function add an event handler to your input control like so:

$addHandler($get('inputControlId'),'focus',handler);

handler is the name of a function that you define next.

function handler(ev){
Sys.UI.DomElement.toggleCssClass(ev.target,'onfocusclassname');

}

where 'onfocusclassname' is defined in your CSS document as the style you want applied to the control when the control has focus.

Hope that helps.

That helps a ton, that's basically what I wanted to do I wasn't sure exactly how to do it. And am still not 100% sure, such as where i register this .js file, but I can probably figure that out. I assume I would then make a 'blur' handler as well.

paul.vencill:

$addHandler($get('inputControlId'),'focus',handler);

Do I need to do this for each textbox? inputControlId appears to be hardcoded. I want to have this functionality for all text boxes in an application, which will be hundrerd of textboxes once all the pages add up.

And I guess I would have to write my own client side validation functions then, in order to make the text box red after an invalid entry.

Well, there's a number of ways to skin any cat, of course. First, your questino on registering; the way I prefer to do it is to use the scriptmanager on the page:

<asp:ScriptManager id='scm' runat='server'> <Scripts> <asp:ScriptReference Path='myscript.js' /> </Scripts></asp:ScriptManager>

Like any control, you could also register it in the codefile, your choice.

As for your question on the volume of handlers you need to add, the $addHandler function requires as its first parameter a reference to a DOM element (hence using $get('id'); which returns a reference to the element itself). If you want all your text inputs then use document.getElementsByTagName() and then filter inside a loop like so:

var inputs = document.getElementsByTagName("INPUT");var count = inputs.length;for (var i=0;iif(input.type && input.type.toUpperCase() =='TEXT') $addHandler(input,'focus',handler);}

Now, for extra fun, if you want to add both a focus and a blur handler to the same object, then instead of $addHandler you can use $addHandlers (with an 's'). It's a convenient shortcut: int he above function change the $addHandler line to:

$addHandlers(input,{'focus' : focusHandler, 'blur' : blurHandler});

As for adding your own validation; yes, I'd submit that it'd probably be easier than trying to get the validation controls to play nicely with your custom script. Just make sure to validate on the server, too, to catch values from clients that have javascript disabled.