Highlight form element

**ChrisClem** · 05-29-2008, 01:05 PM

1) Script Title:
Highlight form element

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...hlightform.htm

3) Describe problem:
I am having issues with radio buttons in Firefox and select drop downs in IE7. In Firefox, the radio buttons do not highlight at all...but it works fine in IE7. With the select drop downs...it works fine in Firefox, and it highlights in IE7, but in IE7 I'm not able to select options unless I double click...so it just sticks...

Does anyone know a good fix for highlighting all form elements in both IE and FF. Thanks so much!!

**jscheuer1** · 05-29-2008, 03:07 PM

FF appears to have its own default behavior for radio buttons, this could perhaps be overriden in its configuration - but probably not by javascript. I'm not sure what the issue is with the select in IE. The bottom line though is that many browsers have default behaviors for certain form elements, so this rather old script was never a very good idea to begin with.

**ChrisClem** · 05-29-2008, 03:27 PM

Do you know a better solution?

I've tried working with css, but that doesn't work with IE. I am working with event handlers but thats giving me the same issues. I recently learned about the jquery library, and it looks tempting to use but I am too much of an amateur on it to do anything with it. Do you any good snippets regarding jquery?

**jscheuer1** · 05-29-2008, 03:56 PM

I really don't think that there is a solution. There are many, many browsers. Many of which will have default behaviors for one or more form elements. Form elements are among the least standardized elements across browsers.

Using pure CSS is probably the safest bet though, because if it doesn't work, it shouldn't harm anything. And because all browsers are supposed to eventually be made to comply with it. I'm talking about pure CSS using pseudo classes, example (you may want to be more specific and/or selective):

Code:

<style type="text/css">
form *:focus, form *:hover, form *:active {
background-color:yellow;
}
</style>

But as I said in my first post, there is no failsafe way to do this in all browsers. Generally users know where they are in a form anyway.

**ChrisClem** · 05-29-2008, 04:17 PM

Thanks

**jscheuer1** · 05-29-2008, 05:01 PM

That all said, here is a better version. But it relies heavily upon browser sniffing, so will most likely miss some of those I can't test in, and become outdated as browsers become more standardized. It may also cause problems in some browsers, use it at your own risk:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Highlight Form Elements - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

//Highlight form element- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com/ This notice must remain for legal use.
//Updated 29/May/2008 in http://www.dynamicdrive.com/forums by username:jscheuer1

highlight.color="yellow";

//Function to highlight form element
function highlight(obj){
var h = highlight, b = function(el, v){
el.style.backgroundColor = v;
if (!h.ie && !window.opera && el.type &&
/(radio)|(checkbox)/.test(el.type.toLowerCase()) &&
el.parentNode.tagName.toLowerCase() == 'span')
el.parentNode.style.backgroundColor = v;
};
if (h.p != '')
b(h.p, '');
b(obj, h.color);
h.p = obj;
}

/*@cc_on @*/
/*@if(@_jscript_version >= 5)
highlight.ie = true;
@end @*/
highlight.p = '';

if (document.getElementById)
window.onload=function(){
for (var a = function(){highlight(this);return true;},
f = document.forms, i = f.length-1; i > -1; --i)
for (var e = f[i].elements, j = e.length-1; j > -1; --j)
if (window.opera && e[j].tagName && e[j].tagName.toLowerCase() == 'select')
e[j].onmouseover = e[j].onfocus = function(){this.focus();highlight(this);return true;};
else if (!highlight.ie && !/Apple/.test(navigator.vendor))
e[j].onfocus = a;
else {
if(/Apple/.test(navigator.vendor)&&e[j].type&&e[j].type.toLowerCase()=='text'){
e[j].style.border = '1px solid #ccc';
e[j].style.borderTopColor = e[j].style.borderRightColor = '#333';
}
e[j].onmousedown = e[j].onkeydown = a;
}
}
</script>
</head>
<body>
<form action="">
<div>
<select name="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select><br>
<span><input type="radio" name="bob" value=""></span>
<span><input type="radio" name="bob" value=""></span><br>
<span><input type="checkbox" name=""></span><br>
<input type="text"><br>
<textarea rows=4 cols=10></textarea><br>
<input type="button" value="Form Button">
</div>
</form>
</body>
</html>

Thread: Highlight form element

Thread Tools

Search Thread

Highlight form element

The Following User Says Thank You to jscheuer1 For This Useful Post:

Highlight form element

Bookmarks

Bookmarks

Posting Permissions