Skip to main content

Add a keyboard shortcut using javascript

When reading a web page,it's more comfortable for a user if that page supports keyboard shortcuts,since then a web user always no need to struggle with mouse.

Add a keyboard shortcut means an event which triggers once a keyboard key is pressed.Hence the javascript event listener 'onkeyup' is used for it.
This method allow you to perform an action when a key is pressed.Each keyboard key have its own keyboard code.

For example;
Tab key code is 9
Enter key code is 13
Shift key code is 16
Ctrl key code is 17
Left Arrow key code is 37

We can defined our own custom keyboard keys association for a shortcut.And what we have to do is,once a user pressed keyboard keys, just need to verify that keys pressed and compare the returned value with the keyboard code associated with the keys used in our custom defined keyboard shortcut.

Example:
var isShift = false; document.onkeyup=function(e) {
if(e.which == 16) isShift=false;
}document.onkeydown=function(e){
if(e.which == 16) isShift=true;
if(e.which == 37 && isShift == true){
alert('Keyboard shortcut(shift key+left arrow key) is activated!');
return false;
}
}

In the above example,we verify the key pressed down by the user. If the key pressed are Shift+Left Arrow Key, a function will be triggered.First verify that Shift is pressed by user.
If yes,then isShift variable is set to true.If the keys are releases then isShift will set to false again.Once done,we hav to verify that the second pressed key is left arrow key.
As the shortcut consists of a keyboard combination,we also have to check isShift variable has value true.If the isShift variable is set to true and the second pressed key is left arrow key,then the triggered javascript alert will display as a message.

For more information regarding keyboard shortcuts visit;

Comments

Post a Comment

Popular posts from this blog

Convert an InputStream to XML

For that we can use DocumentBuilder class in java. By using the method parse(InputStream) ; A new DOM Document object will return. InputStream input; DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder parser = factory.newDocumentBuilder(); Document dc= parser.parse(input); In the above code segment,by using the created Document object,the corresponding XML file for the inputStream can be accessed. References: http://www.w3schools.com/dom/dom_intro.asp http:// download.oracle.com/javase/1.4.2/docs/api/javax/xml/parsers/DocumentBuilder.html
2 comments
Read more

Concat two xml values with XSLT

The use-case described in this blog-post,is there's an WSO2 ESB node setup to proxy an incoming message to a particular back-end endpoint.  Before delivering the message to the back-end endpoint,from the ESB node itself,this incoming message need to processed and change its inside xml payload format. For eg: Below is the incoming message <?xml version="1.0" encoding="UTF-8"?> <CinemaHall name="liberty"> <OwnerData> <Name>John Smith</Name> <openedDate>12/12/80</openedDate> <quality>good</quality> </OwnerData> <CinemaHallData> <rows>100</rows> <seats> <seat>50</seat> <seat>60</seat> </seats> </CinemaHallData> </CinemaHall> This message need to be changed as  below; <?xml version="1.0" encoding="UTF-8"?> <CinemaHall name="liberty"...
3 comments
Read more

CORS support from WSO2 API Manager 2.0.0

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources  on a web page to be requested from another domain outside the domain from which the first restricted resource was served. For example, an HTML page of a web application served from http://domain-a.com makes an <img src >  request for a different domain as 'domain-b.com' to get an image via an API request.  For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts as in above example and only allows to make HTTP requests to its own domain. To avoid this limitation modern browsers have been used CORS standard to allow cross domain requests. Modern browsers use CORS in an API container - such as  XMLHttpRequest  or Fetch - to mitigate risks of cross-origin HTTP requests.Thing to  note is it's not only sufficient that the browsers handle client side of cross-origin sharing,but also the servers f...
Post a Comment
Read more