I've got this javascript bit of code below which will highlight input fields when they have focus. I have been trying to modify it so that it will retrieve the existing class of an element so that it can be restored when the onblur event is triggers. I don't know javascript well enough to do this though, so any help would be great.
Do you really need to make it that generic? If you do have to do that, I'd think you would need to populate an array with the default classnames of all the elements that you might change, but would it be possible to just have a single default classname for all the elements, so in your onBlur event you would just restore to that default?
Another thought would be that if you only want to "highlight" by changing the color of the text and background, you could just do that without changing the classname. You can always override the individual style elements without changing the underlying classes. So maybe you could just do: onFocus -> style.color:white; style.backgroundColor:blue; and onBlur -> style.color:black; style.backgroundColor:white; ??
Yeah it needs to be generic. It would be fine with a default class, however after form submission some fields may be assigned an error class. This error class is being cleared out with the onfocus event, which is fine, but I'd like to get it back after the onblur event.
EDIT:
Just to be clear, I need to save the existing class for each element into an array, then use the array to restore the previous class on the onblur event.
astions wrote:Yeah it needs to be generic. It would be fine with a default class, however after form submission some fields may be assigned an error class. This error class is being cleared out with the onfocus event, which is fine, but I'd like to get it back after the onblur event.
EDIT:
Just to be clear, I need to save the existing class for each element into an array, then use the array to restore the previous class on the onblur event.
Ickk! Well, if you have to, I guess you have to. Would serialize/unserialize be of any help? I've never used that, so I'm not much help. I think I'd really review the whole application to see if there might be some way to restructure it, to take advantage of defaults. Essentially, you're dealing with state information about each control, and it sounds like each one can be in one of 3 states: normal, error and highlighted. Could you perhaps store "previous state" in a Tag parameter in each control? I see that you're already using Tags to designate "Input" controls; could you do that with the Type parameter, then use the Tags for holding the previous state? That's the only thing that I can think of, other than a messy array structure.
I never hold my breath with Javascript, but is there a way to retrieve the current class of an element? I'm already looping through them so it should be a 1 liner, unless of course it's not possible. I haven't found anything searching.
Now we might be getting someplace. I see that line of code retrieves the class name by the element id. The highlight function I'm using contains an array of elements with the tagname of input. So I have two questions.
1. Is there a way for me to get the id of an element so that I can pull it's class name? (if not what would you recommend?)
2. Will this work if an element has more than 1 class?
Ops, sorry - I haven't looked at your first post, but only the last one.
OK... I would do it this way:
[js]function highlight(activeClass){ var elements = document.getElementsByTagName("input"); for (i=0; i < elements.length; i++) { if (!elements.type.match("button|submit|reset|checkbox|radio")) { elements.onfocus=function() { this.oldClass = this.className; this.className += ' ' + activeClass; } elements.onblur=function() { this.className = this.oldClass; } } }} highlight('active'); [/js]
There are 10 types of people in this world, those who understand binary and those who don't
Ok, It works when the highlight function is called AFTER the form fields. I tried to call the highlight function with the window.onload event and that does not work. That is the last problem I need to solve.