Handling Keyboard Shortcuts with Mousetrap
Problem
You need to provide support for keyboard shortcuts, but coding for these is exceedingly tedious.
Solution
Use a standalone library, such as Keypress, or a jQuery plugin, like jQuery.hotkeys.
Keypress is very simple to use. Just drop in the library, and set up the shortcuts or key
combinations you want to capture. You can capture simple combos, or more complex
sequences:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keypress</title>
<script src="keypress.js"></script>
</head>
<body>
<div id="message">Press shift-r or press a b c </div>
<script>
var message = document.getElementByIdundefined"message");
var listener = new window.keypress.Listenerundefined);
listener.simple_comboundefined"shift r", functionundefined) {
message.innerHTML = "Pressed shift r";
});
listener.sequence_comboundefined"a b c", functionundefined) {
message.innerHTML = "you know your ABCs";
});
</script>
</body>
</html>
If you’re using jQuery, then you can use the jQuery.hotkeys plugin as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery hotkeys</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery.hotkeys.js"></script>
<script type="text/javascript">
$undefineddocument).readyundefinedfunctionundefined) {
$undefineddocument).onundefined'keydown',null,'shift+r', functionundefined) {
$undefined'#message').htmlundefined'you pressed shift r');
});
$undefineddocument).bindundefined'keydown', 'ctrl+a', functionundefined) {
$undefined'#message').htmlundefined'Pressed ctrl+a');
});
});
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
EXPLAIN
Capturing keystrokes and shortcut combinations isn’t a complex task, but it is tedious,
which makes it ideal for a library.
Two popular libraries for keyboard shortcut and key tracking are Mousetrap and the
one demonstrated in the solution, Keypress.
I went with Keypress because it looks to be
more actively maintained than Mousetrap—an important consideration when picking
a library. In addition, Keypress supports more sophisticated keyboard actions I found
to be useful.
Keypress is very easy to use, as the solution demonstrated.
There are three simple meth‐
ods to use:
• simple_combo: For the typical two-key shortcut, such as Ctrl+a
• counting_combo: Takes two arguments, the key sequence, and a counter
• sequence_combo: Takes a sequence of keys
The counting_combo() function is a handy bit of code.
It takes a two-key combination,
such as Tab+space, or Ctrl+a. As long as you continue holding down the first key, the
counter increases for key press on the second key. It makes a great way to cycle through
tabs, or highlight paragraphs in a row, or whatever action cycling through a collection.
Any key combination can be a modifier in Keypress. Typically, modifiers would be
combinations like Alt+q, Ctrl+a, or Shift+r. The combinations begin with one of the
three:
• Ctrl
• Shift
• Tab
Keypress basically allows you to define your shortcut to be whatever you want it to be,
which is extensible, but use such freedom with caution: we’re creatures of habit, and we
like our shortcuts to be familiar.
If you need something even more complicated, there’s register_combo() that takes an
object specifying any number of properties associated with the key action. In the fol‐
lowing code, register_combo() specifies both key up and key down functions, as well
as setting the is_unordered to true. This property allows me to type Alt+m and m+Alt,
equally:
listener.register_combo( {
"keys": "alt m",
"on_keydown": function() {
message.innerHTML = "alt m down";
},
"on_keyup": function() {
message.innerHTML = "alt m up";
},
"is_unordered": true
});
}
There are several other properties you can set, detailed in the library’s documentation. Lastly, if you want to register several shortcuts at one time, use register_many():
var scope = this;
var many = listener.register_many([
{
"keys": "alt b",
"on_keydown": function() {
message.innerHTML = "alt b";
},
"this": scope
},
{
"keys": "alt c",
"on_keydown": function() {
message.innerHTML = "alt c";
},
"this": scope
}]);
The scope of the object is specifically set to the window via the this property. You can also unregister any key combination with:
• unregister_combo(shift r)
• unregister_many(name of variable)
• reset: Resets all combinations
There are also opportunities to pause the keyboard capturing when the cursor is in an input field or in other circumstances. Keypress works equally on its own or in combi‐ nation with JQuery. If you prefer to use a jQuery plugin, though, then jQuery.hotkeys is probably for you, as demonstrated in the solution.
Note, though, that its functionality is limited compared to Keypress. However, if you’re only interested in creating traditional shortcuts, then the plugin fits your needs. To use, simply map the key combination using jQuery’s on()/off() syntax, or you can use the plugins own bind()/unbind() methods.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment