[thelist] event handlers in a stylesheet?

Ken Kogler ken at kenkogler.com
Mon Mar 11 23:09:01 CST 2002

OK, what about this?

Create 2 classes - in this example I'll use 'focusOn' and 'focusOff'.

Then, in the onClick handler for the form element, add a javascript
function call. Looks like this:

<input onClick="setStyle(this);">

And the JavaScript looks like this (in English, not code):

setStyle(formElement) {
  change class to "focusOn"
  change length to +10

Then just do the opposite for onDeactivate.

Lemme know if you need more help/clarification.

I'm in the middle of writing an eVolt tutorial that does something much
similar. It uses JavaScript functions to change the CSS className of a
form element (like I'm suggesting here) when the data within is proven
valid, using client-side form validation techniques.

Feel free to poke around in my code and see it it's helpful at all...
http://www.kenkogler.com/form/ Beware, though, that it's still a bit
buggy as it's not meant to be published for quite some time yet.


-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org] On Behalf Of Eric Engelmann
Sent: Monday, March 11, 2002 7:39 PM
To: Thelist at Lists. Evolt. Org
Subject: [thelist] event handlers in a stylesheet?

Looking for an elegant way to do this:

	style="border: none;"
	onclick="this.style.border='1px #cccccc

for each field on a very large form.

I wish I could do:

	.formelement {
	border: none;
	onclick="this.style.border='1px #cccccc

and just put class="formelement" in each one that I wanted to have this.

Of course that doesn't work at all.

I'd rather not repeat that for every element, any brilliant hacks out
Its an IE-specific application, so that's ok if its got MS-specific
in it.

- Eric

For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !

More information about the thelist mailing list