{"id":13394442,"url":"https://github.com/keithamus/jwerty","last_synced_at":"2025-09-28T20:31:41.855Z","repository":{"id":1704449,"uuid":"2433414","full_name":"keithamus/jwerty","owner":"keithamus","description":"⌨ Awesome handling of keyboard events","archived":true,"fork":false,"pushed_at":"2017-11-07T20:29:35.000Z","size":174,"stargazers_count":1207,"open_issues_count":32,"forks_count":107,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-12-18T22:12:10.172Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://keithamus.github.io/jwerty","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keithamus.png","metadata":{"files":{"readme":"README-DETAILED.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-09-21T22:36:34.000Z","updated_at":"2024-11-18T18:00:17.000Z","dependencies_parsed_at":"2022-09-07T19:00:46.956Z","dependency_job_id":null,"html_url":"https://github.com/keithamus/jwerty","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithamus%2Fjwerty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithamus%2Fjwerty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithamus%2Fjwerty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keithamus%2Fjwerty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keithamus","download_url":"https://codeload.github.com/keithamus/jwerty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234563116,"owners_count":18853053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:19.872Z","updated_at":"2025-09-28T20:31:41.447Z","avatar_url":"https://github.com/keithamus.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI","Keyboard Wrappers","Keyboard Wrappers [🔝](#readme)","键盘封装器"],"sub_categories":["Runner","运行器","运行器e2e测试"],"readme":"The jwertyCode\n==============\n\nAll jwerty events will require a jwertyCode in some way. jwertyCodes can be\npassed as strings or arrays, strings being the easiest way to express a combo.\nA jwertyCode string should look similar to this:\n\n    '⌃+⇧+P/⌘+⇧+P, X'\n\nCase and whitespace do not matter. `+` is used to add keys to make a single\ncombo, `/` is used to provide a list of optional keys or key combos, and `,` is\nused to make a key combo sequence. For example, if you wanted to look for the\nkey combination of control + shift + P, then one of the following would\nrepresent that (you can use shorthand names or symbols for keys that need it):\n\n    'ctrl+shift+p' OR 'control+shift+P' OR '⌃+⇧+P'\n\nIf you wanted *either* control + shift + P *or* command + shift + P then you\nwould use the `/` key to separate the two:\n\n    'ctrl+shift+p/cmd+shift+P'\n\nIf you wanted to only fire an event when the user has typed ctrl+shift+p\nfollowed by the P key on it's own again, using a `,` to separate them, like\nso:\n\n    'ctrl+shift+p, p'\n\nYou could also mix sequences and optionals:\n\n    'ctrl+shift+p/cmd+shift+p, p'\n\nAlso, since version 0.3, you can specify ranges:\n\n    'ctrl+shift+[0-9], ctrl+shift+[num-0-num-9]'\n\nThis will automatically expand these to ctrl+shift+0, ctrl+shift+1 and so on.\nBecause these are worked out on the keyboard keycodes, they'll work many types\nof ranges, such as:\n\n    '[f1-f11], [num-3-num-7], [a-c], [g-f], [←-↓]' // (the last one matches all arrow codes)\n\nIf you have a complex pattern, it may be more readable to use an array literal\nto express the combination. If you express it as an array, then the top level\narray will delemit a sequence, while each value in the array can be a string,\nwhich is parsed for commas, or an array which will delimit optionals.\nIn other words, the following are the same:\n\n    [['ctrl+shift+p', 'cmd+shift+p'], 'p'] OR 'ctrl+shift+p/cmd+shift+p, p'\n\n--------------------------------------------------------------------------------\n\njwerty.key\n==========\n\n    jwerty.key(jwertyCode, callbackFunction, [callbackContext]);\n\n`jwerty.key` will attach an event listener and fire `callbackFunction` when\n`jwertyCode` matches. The event listener is attached to `document`, meaning\nit will listen for any key events on the page (a global shortcut listener). If\n`callbackContext` is specified then it will be supplied as\n`callbackFunction`'s context - in other words, the keyword `this` will be\nset to `callbackContext` inside the `callbackFunction` function.\n\n - If `callbackFunction` returns `false` then preventDefault() will be\n   called for the event, in other words - what the browser normally does when\n   this key is pressed will not happen.\n\n - If `callbackFunction` can be a boolean (`true` or `false`), rather than an\n   actual function. If it is a boolean, it will be treated like a function that\n   instantly returns that value. This is useful if you just want to disable a\n   key, for example: `jwerty.key('ctrl+V', false)` will disable ctrl+V's default\n   behaviour.\n\n\n    jwerty.key(jwertyCode, callbackFunction, [callbackContext], [selector, [selectorContext]]);\n\n`jwerty.key` will attach an event listener and fire `callbackFunction` when\n`jwertyCode` matches. The event listener is attached to `selector`.\n`callbackContext` can be ommited if not needed, and `selector` becomes\nthe third argument. `selectorContext` is used to search for `selector`\nwithin `selectorContext`, similar to jQuery's `$('selector', 'context')`.\n\n - `selector` can be a CSS1/2/3 selector - it will use\n   document.querySelectorAll, unless you have jQuery, Zepto or Ender installed,\n   in which case it will use those as the selector engine.\n - `selector` can be a DOM element (such as HTMLDivElement), or a jQuery\n   element object, or a Zepto element object, or an Ender element object.\n - `selectorContext` has the same rules as `selector`, it can be a\n   string, DOM element or jQuery/Zepto/Ender element object.\n\n\n\nBoth variants of this method will return a subscription handle `h`, by which you may undo the binding by calling `h.unbind()`\n\n\n#### Example Usage\n```javascript\n// prevents 'ctrl+shift+p''s default action\njwerty.key('ctrl+shift+p', false);\n\n// outputs \"print!\" to the console when pressed.\njwerty.key('ctrl+shift+p', function () { console.log('print!') });\n\n// will work only once, then unbind itself\nvar subscriptionHandle = jwerty.key('ctrl+alt+k', function(){\n  console.log('working...');\n  subscriptionHandle.unbind();\n});\n\n// will prevent the shortcut from running, only when '#myInput' is in focus\njwerty.key('ctrl+shift+p', false, '#myInput');\n```\n--------------------------------------------------------------------------------\n\njwerty.event\n==========\n\n    jwerty.event(jwertyCode, callbackFunction, [callbackContext]);\n\n`jwerty.event` will return a function, which expects the first argument to be a\nkey event. When the key event matches `jwertyCode`, `callbackFunction`\nis fired. `jwerty.event` is used by `jwerty.key` to bind the function it returns.\n`jwerty.event` is useful for attaching to your own event listeners. It can be\nused as a decorator method to encapsulate functionality that you only want to\nfire after a specific key combo. If `callbackContext` is specified then it\nwill be supplied as `callbackFunction`'s context - in other words, the\nkeyword `this` will be set to `callbackContext` inside the\n`callbackFunction` function.\n\n - If `callbackFunction` returns `false` then preventDefault() will be\n   called for the event, in other words - what the browser normally does when\n   this key is pressed will not happen.\n\n - If `callbackFunction` can be a boolean (`true` or `false`), rather than an\n   actual function. If it is a boolean, it will be treated like a function that\n   instantly returns that value. This is useful if you just want to disable a\n   key, for example: `jwerty.key('ctrl+V', false)` will disable ctrl+V's default\n   behaviour.\n\n#### Example Usage\n```javascript\n// prevents pasting in #myinput\n$('#myinput').bind('keydown', jwerty.event('ctrl+v/cmd+v', false));\n\n// great to use with Backbone JS view events:\nevents: {\n    'keyup input': 'keyupInput'\n},\nkeyupInput: jwerty.event('enter', function () {\n    this.submit();\n}),\n```\n--------------------------------------------------------------------------------\n\njwerty.is\n==========\n\n    jwerty.is(jwertyCode, event, [sequenceKey]);\n\n`jwerty.is` will return a boolean value, based on if `event` matches\n`jwertyCode`. `jwerty.is` is called by `jwerty.event` to check whether or\nnot to fire the callback. `event` can be a DOM event, or a\njQuery/Zepto/Ender manufactured event. The properties of `jwertyCode`\n(speficially ctrlKey, altKey, metaKey, shiftKey and keyCode) should match\n`jwertyCode`'s properties - if they do, then `jwerty.is` will return `true`.\nIf they don't, `jwerty.is` will return `false`.\n\n - If `jwertyCode` is a key sequence (e.g 'ctrl+c, d, e') then it will check\n   the first part of the sequence unless you specify `sequenceKey`.\n   `sequenceKey` needs to be an integer for the zero-indexed array of keys\n   in the key sequence. So for example, running `jwerty.is(e, 'ctrl+c, d, e', 0)`\n   will try to match `ctrl+c`, whereas `jwerty.is(e, 'ctrl+c, d, e', 1)` will\n   try to match `d` and so on.\n\n - If `jwertyCode` includes optionals (e.g 'ctrl+shift+p/cmd+shift+p') it\n   will look at both, and if either return a match then the return value will be\n   `true`.\n\n#### Example Usage\n```javascript\n// add \"pasted\" class when ctrl+v/cmd+v is pressed\n$('#myinput').bind('keydown', function () {\n    if (jwerty.is('ctrl+v/cmd+v')) {\n        this.addClass('pasted');\n    }\n});\n```\n--------------------------------------------------------------------------------\n\njwerty.fire\n==========\n\n    jwerty.fire(jwertyCode, [selector, [selectorContext]], [sequenceKey]);\n\n`jwerty.fire` will construct a keydown event to fire, based on `jwertyCode`.\nThe event will be fired against `selector`. `selectorContext` is used to\nsearch for `selector` within `selectorContext`, similar to jQuery's\n`$('selector', 'context')`.\n\n - `selector` can be a CSS1/2/3 selector - it will use\n   document.querySelectorAll, unless you have jQuery, Zepto or Ender installed,\n   in which case it will use those as the selector engine.\n - `selector` can be a DOM element (such as HTMLDivElement), or a jQuery\n   element object, or a Zepto element object, or an Ender element object.\n - `selectorContext` has the same rules as `selector`, it can be a\n   string, DOM element or jQuery/Zepto/Ender element object.\n\n#### Example Usage\n```javascript\n// fire 'a' on body\njwerty.fire('a');\n\n// fire 'a' on #myform input.name\njwerty.fire('a, b', 'input.name', '#myForm');\n\n// fire 'b' on #myform input.name\njwerty.fire('a, b', 'input.name', '#myForm', 2);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeithamus%2Fjwerty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeithamus%2Fjwerty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeithamus%2Fjwerty/lists"}