[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.
-kenKogler(.com)
-----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:
[input
type="text"
name="FirstName"
value="something"
size="3"
style="border: none;"
onclick="this.style.border='1px #cccccc
solid';this.size=this.value.length+10;"
ondeactivate="this.size=this.value.length;"
]
for each field on a very large form.
I wish I could do:
[style]
.formelement {
border: none;
onclick="this.style.border='1px #cccccc
solid';this.size=this.value.length+10;"
ondeactivate="this.size=this.value.length;"
}
[/style]
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
there?
Its an IE-specific application, so that's ok if its got MS-specific
stuffs
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