This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
Freshness Warning
This blog post is over 17 years old. It's possible that the information you read below isn't current and the links no longer work.
19 Jul 2006
I wanted to alter the appearance of a form field when someone places their cursor in i, an effect that you see here and there.
My requirements for this were that I shouldn’t have to manually attach a Javascript event to every field and the code should be reusable on other sites without reconfiguration each time.
Using the principles of unobtrusive JavaScript I put together a short script, that when included on a page, will automatically add onFocus
and onBlur
handlers to all text and password fields on that page. When a field is activated it takes on the properties of a special CSS class. When it loses focus, it takes on the properties of another CSS class.
All you have to do to include this effect in your page is include the JavaScript file somewhere on the page and to add two CSS classes to your stylesheet. You decide how those CSS classes should make the form field look.
First, add the two CSS classes to your stylesheet and style them as you’d like. highlightActiveField
is loaded when the field is activated. highlightInactiveField
is loaded when the field loses focus.
.highlightActiveField { border: 1px solid black; border-left: 4px solid #BF1717; background-color: #DFDFDF; } .highlightInactiveField { border: 1px solid black; background-color: #fff; }
Then add this JavaScript to the page somewhere—I created a file called highlightform.js
and include it like this: <script type="text/javascript" src="highlightform.js"></script>
function initHighlight() { if (!document.getElementsByTagName){ return; } var allfields = document.getElementsByTagName("input"); // loop through all input tags and add events for (var i=0; i<allfields.length; i++){ var field = allfields[i]; if ((field.getAttribute("type") == "text") || (field.getAttribute("type") == "password") ) { field.onfocus = function () {this.className = 'highlightActiveField';} field.onblur = function () {this.className = 'highlightInactiveField';} } } } // Nifty function to add onload events without overwriting // ones already there courtesy of the lovely and talented // Simon Willison http://simon.incutio.com/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } addLoadEvent(initHighlight);
Now step three... there is no step three! Just load your page and watch the magic.
Yes, since IE doesn't support the :hover pseudoclass on anything but links, it's neccessary to use JavaScript.
You can also use Peter Nederlof's whatever:hover to add :hover, :focus and :active to IE: http://www.xs4all.nl/~peterned/csshover.html
Problems: - If the textbox already has a class, your method overwrites it. - If the textbox already has onblur/onfocus event handlers, your method overwrites those. You know how to handle the latter. For the former, I'd suggest adding "highlightActiveField" to the className (.className += " highlightActiveField") onfocus and removing it onblur:.className = .className.replace(/ *highlightActiveField/g, '');
This is pretty sweet, thanks for sharing.
I threw the following together. It relies on some other functions, such as addClass, removeClass and addEvent. But it works for all form elements, not limiting to type="text" and type="password". The addEvent means events are not overwritten. And similarly addClass makes sure existing classes are not overwritten. Also, you do not need a default unfocused class, as you can simply use the element itself. input, textarea { border: 1px solid #ccc; } input.focused, textarea.focus_element { border-color: #000; } var focus_class = 'focus_element'; function form_focus_fix() { if(!document.createElement || !document.getElementsByTagName || !document.getElementById) return false; var form_collection = document.getElementsByTagName('form'); var form_collection_length = form_collection.length; for(i=0; i<form_collection_length; i++) { for(j=0; j<form_collection[i].elements.length; j++) { addEvent(form_collection[i].elements[j],'focus',function(){addClass(this,focus_class)}); addEvent(form_collection[i].elements[j],'blur',function(){removeClass(this,focus_class)}) } } }
This discussion has been closed.
Joseph Scott
July 19, 2006 9:19 PM
You can do this with plain CSS: input:focus, textarea:focus { background-color: yellow; } This works in Firefox, Opera and Safari. Of course IE doesn't properly support :focus on form fields :-(