Sometimes, We Write Stuff...
Mootools Class - Form Hilighter
I've got a very Mootools-heavy client site launching soon, and in the process I ended up writing several interesting classes for it. I plan on sharing them all here over the next couple of weeks, and to kick it off I want to start with the smallest (read: easiest) of them: a form field highlighter class.
What does it do?
As you have probably guessed, this simple Mootools class will animate a highlight effect (on focus) of text input and textarea fields in any form. It's nothing very exciting, but it may come in handy for some of you. (It's also a great way to introduce classes to newcomers, since it's so small.)
How To Use It?
All you need to do is include the mootools base build and the hiliter class file in your page header, add a class to your CSS for the highlighted style, and call an instance of the class on DOM ready.
Here is an example of each, and note that you can also refer to the demo for a working example:
1. Include It
In the header of your page, include MooTools and the hilighter class. My included files are in a 'js' directory in this example:
<script type="text/javascript" src="js/moo_12.js"></script> <script type="text/javascript" src="js/sl_hilight_v1.js"></script>
2. Add a CSS Class
In an associated CSS file, add a new class for how you want your fields to be highlighted. (Note: You can use 'border:none' on your default field styling if you prefer no border.) We'll call this one 'active_field':
.active_field {
color: #3A5864;
background-color: #BBDEED;
border-color: #8CC4DB;
}
3. Call It
You can either insert this in a script tag in your header, or add this to an external .js file and include it if you prefer. We're just grabbing the inputs, textareas, etc we want to use and specifying the class we created above... and then we call it!
window.addEvent('domready', function() {
var myInputs = $$('input', 'textarea');
var myHilighter = new SL_Hilight({
inputs: myInputs,
activeClass: 'active_field',
initialFocus: true
});
});
Demo / Download
Promote This Article
+ Comments
Hello,
I am using this highlighter code in my site. It works fine to the point of highlighting, but the "on_blur" does not work. So i end up with the whole form highlighted after it has been completed.
Do you have any ideas of why this would be happening?
It happens in both FF 3 and IE 7.
Hi Ritika - does my demo work for you in FF3 and IE7? (It is working for me...) If so, then you've likely changed something in either the CSS or the JavaScript.
(By the way, in MooTools it's simply 'blur' - there's no 'on_blur' event. Look at line 37 in the class source.)
this is a bit after this was originally posted, but a slight flaw, in logic...
need to add a length check on myInputs to avoid errors on pages without input fields.
var myInputs = $$('input', 'textarea');
if(myInputs.length >= 1){
var myHilighter = new SL_Hilight({
inputs: myInputs,
activeClass: 'active_field',
initialFocus: true
});
}
Other than that, great simple code.
Thanks!
Hi Bruce,
Thanks for your comment. Yes I suppose that could be considered a flaw – if you planned on including/instantiating the class on every page. However, if used only on pages where there are forms, there shouldn't be any issues. (I would consider it more of a flaw to include/instantiate a class on a page where it isn't used...)
Hi,
Thanks for the cool script. I think there is a small bug where you assign this.origStyles. Because you assign it to the highlight object, it only remembers the style of the last element. I changed this to using el.store() and el.retrieve and it works perfectly.
Cheers
Huy
Here's a preview of your comment:
Very nice work. Seems light and easy to use. Looking forward to see the other bits you will be releasing from this project.