<!DOCTYPE html>
<html>
<head>
<title>KbShort :: Keyboard Shortcut for Webpages</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="kbshort.js"></script>
<script>
window.addEventListener('load', function(evt){
var kbs = new KeyboardShort(window.document.body);//inicia um ouvinte de atalhos de teclado para toda a página
kbs.register('F1', function(evt){
alert('F1 pressed!');
});
kbs.register('F2', function(evt){
alert('Control+F2 pressed!');
}, false, true);
kbs.register('F3', function(evt){
alert('Alt+F3 pressed!');
}, true, false);
var kbsi = new KeyboardShort(document.getElementById('test'));//inicia um ouvinte de atalhos de teclado para o campo de texto
kbsi.register('F1', function(evt){
alert('F1 pressed for a text field!');
});
//diferencia maiúscuals e minúsculas
kbs.register('q', function(evt){
alert('q pressed!');
}, false, false);
kbs.register('Q', function(evt){
alert('Q (Shift+q) pressed!');
}, false, false);
//remove global shortcut q
kbs.register('R', function(evt){
kbs.unregister('q');
}, false, false);
});
</script>
</head>
<body>
<h3>Global shortcuts</h3>
<p>These shortcuts work anywhere on the page.</p>
<ul>
<li>F1</li>
<li>Control+F2</li>
<li>Alt+F3</li>
<li>q</li>
<li>Q</li>
</ul>
<h3>Shortcuts for elements</h3>
<p>You can assign keyboard shortcuts to be fired only when the focus is on specific elements.</p>
<input id="test" size="40" placeholder="Clique neste campo e pressione F1">
<h3>Removing shortcuts</h3>
<p>You can remove previously assigned keyboard shortcuts.</p>
<p>Press R (Shift + r) to remove q global shortcut.</p>
</body>
</html>
|
Download
