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 tutorial
No comments:
Post a Comment