Tag Archives: Handling Keyboard Shortcuts in javascript

Selvakumar Chokalingam 7:19 AM on May 21, 2011
Tags: Handling Keyboard Shortcuts in javascript, , jquery keyboard shortcuts, js keyboard shortcuts, , keyboard shotcuts jquery, keyboard shotcuts js   

Keyboard Shortcuts using JQuery

Again it is very simple, looks you to feel like a magician if you are done. Just follow the steps :-

Download the shortcut.js file and include it in your layout or view file

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

<%= javascript_include_tag ‘shortcut’ %>

Then, add the following lines in the layout or view file where you want the keyboard shortcut to work on

shortcut.add(“e”,function() {
        short_modal2(‘/chats’);
 },{‘disable_in_input’ : true});

disable_in_input: true will make sure the shortcut key ‘e’ won’t work when the user is on input field like textbox and textarea. Default is false.

shortcut.add(“Shift+T”,function() {
short_modal1(‘/tasks/new’);
});

For adding a shortcut which is already a shortcut key on a browser like ‘/’, ‘Ctrl + F’, ‘Ctrl + S’ etc…,

shortcut.add(“/”,function() {
    $(‘.keyboard-shortcuts’).css(‘display’,’none’);
 },{‘type’: ‘keydown’, ‘propagate’:false, ‘target’:document
,’keycode’ : 191,’disable_in_input’ : true});

The following are the valid keys (you can also make the combination of any two keys from below) :-

  • All alpha/numeric keys – abc…xyz,01..89
  • Special Characters – Every special character on a standard keyboard can be accessed.
  • Special Keys…
    • Tab
    • Space
    • Return
    • Enter
    • Backspace
    • Scroll_lock
    • Caps_lock
    • Num_lock
    • Pause
    • Insert
    • Home
    • Delete
    • End
    • Page_up
    • Page_down
    • Left
    • Up
    • Right
    • Down
    • F1
    • F2
    • F3
    • F4
    • F5
    • F6
    • F7
    • F8
    • F9
    • F10
    • F11
    • F12

That’s it. Rock the world…

Selvakumar Chokalingam 10:05 AM on September 3, 2010
Tags: Handling Keyboard Shortcuts in html, Handling Keyboard Shortcuts in javascript, , , keyboard shortcuts html, keyboard shortcuts in javascript, keyboard shortcuts javascript, keyboard shortcuts jquery, keyboard shortcuts rails, keyboard shortcuts ruby   

Handling Keyboard Shortcuts in Rails or HTML

Handling keyboard shortcuts in a Rails app, HTML using javascript is pretty simple.

Just download a shortcut.js from the following URL :

http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

Rails :-

Paste the file in the /public/javascripts folder

Write the following code in your view / layout file before <body> tag.

<head>
<script src=”/javascripts/shortcut.js” type=”text/javascript”></script>
<script type=”text/javascript”>
shortcut.add(“Ctrl+Shift+X”,function() {alert(“You Pressed Ctrl+Shift+X!”);});
shortcut.add(“Ctrl+a”,function() {alert(“You pressed Ctrl+a!”);});
shortcut.add(“D”,function() {alert(“You Pressed D!”);});
</script>
</head>

Note : Displaying an alert message is not just the action for this concept. Instead of alert message, we can write any javascript function to execute some action or even we make pass it to controller through AXAJ request. (refer :- https://selvaonrails.wordpress.com/2010/08/31/making-a-ajax-request-from-rails/)