My Blog

Expanding off this article on JavaScript key listeners I’ll be showing you how to create a key listener in mootools 1.2 today. You will need to use mootools event functionality for this.

1
2
3
4
5
6
7
8
9
10
11

window.addEvent('domready', function() {
 
	MochaUI.Modal = new MochaUI.Modal(); 
 
    $('last_name').addEvent('keydown',function(event){
    	if(event.key=='enter'){
			searchCustomer();
    	}
    });
 
});

In this example we add an event to the $(‘last_name’) element and tell mootools we want the framework too look for all keydown events on this element. If a keydown event occurs using the enter key we execute the searchCustomer function. Be sure to iniate this on dom ready or whenever the element you are adding the event to is loaded. On DOM ready simply means when the page is completed loading much like body onload. Key press events are a great way to minimize the amount of clicks in your user interface. Many studies show that using the keyboard is up to three times faster than using a mouse!

Related posts:

1. How to Create a JavaScript Key Listener
2. adding events to elements on and after load in mootools
3. slick interfaces with javascript + MooTools + mochaUI
4. JavaScript snippet for handling credit card readers
5. a dynamic javascript calendar that works with mootools mocha ui

Tags: event, key, keydown, keypress, keyup, listener, mootools

This entry was posted on Friday, December 12th, 2008 at 6:40 pm and is filed under JavaScript and Ajax. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.