This post is the third lesson which I dedicate to MooTools for newbie and illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.
Some time ago I wrote this post where I explained some useful tips to enrich HTML Form using simple JavaScript functions. Some readers asked to me to illustrate similar examples using MooTools and unobtrusive JavaScript code, so in this tutorial I implemented the Twitter-like chars counter example of my previous post. This counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field:
Click on the link below to download the full code:
Download full code1. Add MooTools framework on your page
First, you may download the latest version of MooTools and add a link to the framework within the tag <head> of the page:
<script type="text/javascript" src="mootools.svn.js"></script>
2. HTML Code
HTML code for this example is very simple:
<label for="myInput">Write something here:</label>
<input type="text" id="myInput" maxlength="20" />
<span id="counter_number" class="counter">20</span> Remaining chars
<input type="text" id="myInput" maxlength="20" />
<span id="counter_number" class="counter">20</span> Remaining chars
In this code I added an input text field with id="myInput" and a span element with id="counter_number" which display the remaining chars.
3. JavaScript Code
Copy and paste the following code after MooTools link (see step 1) in the tag <head>:
<script type="text/javascript">
window.addEvent('domready', function() {
</script>
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
}); max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
});/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
</script>
If you want, with some lines of additional code, you can change the counter text color for example from gray to red when remaining chars are less then 6:
This is the code:
<script type="text/javascript">
window.addEvent('domready', function() {
</script>
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
}); max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
/* Change color if remaining chars are LT 6*/
if(remaining_chars<=5){
$('counter_number').setStyle('color', '#990000');
} else {
$('counter_number').setStyle('color', '#666666');
}
});/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
/* Change color if remaining chars are LT 6*/
if(remaining_chars<=5){
$('counter_number').setStyle('color', '#990000');
} else {
$('counter_number').setStyle('color', '#666666');
}
</script>
I added an if statement which checks the value of remaining_chars var. If this value is less then 6, this script change the counter text color to the value #99000, else to #666666.
Naturally this is only a very simple example which helps all MooTools newbie to learn the framework bases.
For questions please add a comment!
Download this tutorialRelated content
Useful tips to enrich your HTML Forms
MooTools Lessons
Lesson 1 - Basic Tips for Web Designer
Lesson 2 - Get elements ID using unobtrusive code
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Great post. Thanks for sharing. The new template is beautiful and really clean to read.
Hey Antonio, loved the post! You do a great job presenting useful tutorials in bite-size fashion that won't scare people away.
A more "mootools way" to do it would have been :
$('counter_number').set('text',remaining_chars);
Nice work anyway. :)
Nice post, Would you be doing Part 2 of that Creating Application tutorial that you posted a week back...?
Thanks again.
Man, this is too complicated for me. But lately I have been leaning so many things from yours and Amanda's blog. Never knew I could do so much with my blog. It looks beautiful now. Waiting on you to release your template.. :)
Useful post.
thanks for sharing knowledge on mootools as i also inspired by moo effects.
Thanks
Great Tutorial, as allways! i also love your blogger template!
Nice post!
I wanted to tell you that the link for the second lesson is not working in this tutorial (at the bottom).
Keep up the great woork!
Thank you for sharing these 3 nice tutorials about "Moo Tools". Great job.
How would you prevent extra chars showing up after char-limit is reached in textarea element?
Preventing extra text:
if (current_length > max_chars) {
$('myInput').setProperty('value', $('myInput').getProperty('value').substr(0,max_chars));
}
thanks for the info.
hi ya, this is the first time i have came across this site, while searching for mootools, i really liked first lesson and the third part, but for the second part, the link seems broken, can you please update that!!!
Thanks,