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

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

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 from which these resources getting need to handl

[WSO2 AM] APIStore User Signup as an approval process

In previous versions of WSO2 APIManager before 1.6.0, it was allowed any user who's accessible the running APIStore come and register to the app.But there will be requirement like,without allowing any user to signup by him/her self alone,first get an approve by a privileged user and then allow to complete app registration.Same requirement can be apply to application creation and subscription creation as well.To fulfill that,we have introduced workflow extension support for  WSO2 APIManager  and you can find the introductory post on this feature from my previous blog post on " workflow-extentions-with-wso2-am-160 " . From this blog-post,I'll explain how to achieve simple workflow integration with default shipped resources with  WSO2 APIManager 1.6.0 and WSO2 Business Process Server 3.1.0 with targeting "user-signup" process. Steps First download the WSO2 APIManager 1.6.0[AM] binary pack from product download page . Extract it and navigate to