Git Product home page Git Product logo

jquery.hotkeys's Introduction

jQuery.Hotkeys Build Status

#About jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.

This plugin is based off of the plugin by Tzury Bar Yochay: jQuery.hotkeys

The syntax is as follows:

$(expression).bind(types, keys, handler);
$(expression).unbind(types, handler);

$(document).bind('keydown', 'ctrl+a', fn);

// e.g. replace '$' sign with 'EUR'
$('input.foo').bind('keyup', '$', function(){
  this.value = this.value.replace('$', 'EUR');
});

Syntax when wanting to use jQuery's on()/off methods:

$(expression).on(types, null, keys, handler);
$(expression).off(types, handler);

$(document).on('keydown', null, 'ctrl+a', fn);

// e.g. replace '$' sign with 'EUR'
$('input.foo').on('keyup', null, '$', function(){
  this.value = this.value.replace('$', 'EUR');
});     

Example

Example

Event Types

Supported types are 'keydown', 'keyup' and 'keypress'

jQuery Compatibility

Works with jQuery 1.4.2 and newer.

It is known to be working with all the major browsers on all available platforms (Win/Mac/Linux)

  • IE 6/7/8+
  • FF 1.5/2/3+
  • Opera-9+
  • Safari-3+
  • Chrome-0.2+

Browserify Compatibility

If you want to include this module in a Browserified project, just add it to node_modules and require it.

require('jquery.javascript');

This will work if jQuery is global (ex. served from a CDN). If it's not, you need to (shim it)[https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global]:

{
  "browserify-shim": {
    "jquery": "global:jQuery"
  }
}

Notes

Modifiers are not case sensitive (Ctrl == ctrl == cTRL)

If you want to use more than one modifier (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. alt+ctrl+shift

Hotkeys aren't tracked if you're inside of an input element (unless you explicitly bind the hotkey directly to the input). This helps to avoid conflict with normal user typing.

You can use namespacing by adding a suffix to the event type (e.g. keyup.toggle)

Hotkeys within inputs

Hotkeys aren't tracked if the user is focused within an input element or any element that has contenteditable="true" unless you bind the hotkey directly to the element. This helps to avoid conflict with normal user typing. If you don't want this, you can change the booleans of the following to suit:

  • jQuery.hotkeys.options.filterInputAcceptingElements
  • jQuery.hotkeys.options.filterContentEditable
  • jQuery.hotkeys.options.filterTextInputs (deprecated, will be removed in a later version)

Meta and Hyper Keys

Meta and hyper keys don't register on keyup in any browser tested.

Chrome 33.0.1750.117

Meta key registers on keydown event. Hyper key registers on keydown event.

Firefox 27.0.1 and Safari 7.0.1

Meta key registers on keydown and keypress events. Hyper key registers on keydown and keypress events.

Opera 19.0

Meta key doesn't register at all :( Hyper key registers on keydown and keypress events.

TL;DR

Bind to keydown event for meta and hyper keys, but meta key does not work in Opera ;)

Addendum

Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as Ctrl-t for new tab, or Ctrl-a for selecting all text. You can always bubble them up to the browser by returning true in your handler.

Others, (IE) either let you handle built-in short-cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will not pass those events to the DOM at all.

So, if you bind Ctrl-Q or Alt-F4 and your Safari/Opera window is closed don't be surprised.

jquery.hotkeys's People

Contributors

abolishme avatar calvinchen avatar gabrielflorit avatar jeresig avatar kevingorski avatar lazd avatar lipis avatar markijbema avatar morgante avatar msantic avatar nicoder avatar rpocklin avatar tbranyen avatar tutkun avatar tzuryby avatar vasilionjea avatar yuppy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.