{"id":17880664,"url":"https://github.com/benjamincharity/angular-keybind","last_synced_at":"2025-03-22T08:31:04.529Z","repository":{"id":57178633,"uuid":"71827404","full_name":"benjamincharity/angular-keybind","owner":"benjamincharity","description":":abc: :nut_and_bolt: A small AngularJS module to bind specific keypress events to methods.","archived":false,"fork":false,"pushed_at":"2016-10-26T20:21:22.000Z","size":36,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-27T09:34:17.520Z","etag":null,"topics":["angualrjs","keybind","keypress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjamincharity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-24T20:04:38.000Z","updated_at":"2017-08-14T16:16:40.000Z","dependencies_parsed_at":"2022-09-09T19:00:13.059Z","dependency_job_id":null,"html_url":"https://github.com/benjamincharity/angular-keybind","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keybind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keybind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keybind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keybind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamincharity","download_url":"https://codeload.github.com/benjamincharity/angular-keybind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931472,"owners_count":20534007,"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":["angualrjs","keybind","keypress"],"created_at":"2024-10-28T12:27:02.030Z","updated_at":"2025-03-22T08:31:04.039Z","avatar_url":"https://github.com/benjamincharity.png","language":"JavaScript","readme":"# angular-keybind\n\n[![MIT License][license_image]][license_url] [![Coverage Status][coveralls_badge]][coveralls_link] [![NPM version][npm_version_image]][npm_url] [![CircleCI][circle_badge]][circle_link]\n\n:abc: :nut_and_bolt: A small AngularJS module to bind specific keypress events to methods.\n\nAt times you may need to attach specific functionality to an element based on specific key input.\nFor simple cases, AngularJS has a built in solution called [`ngKeyup`][ng_keyup] that works well. At\nother times you may need something with a bit more power. angular-keybind was built to solve this\nmore complex use case.\n\n\u003e [:tv: **Demo**][demo]\n\n_[Comments and Pull Requests welcome!][issues]_\n\n\n## Contents\n\n- [Installation](#installation)\n- [Dependencies](#dependencies)\n- [Usage](#usage)\n  - [Attributes](#attributes)\n- [Development](#development)\n\n\n\n## Installation\n\n#### NPM\n```bash\nnpm install angular-keybind --save\n```\n\n#### Bower\n```bash\nbower install angular-keybind --save\n```\n\n#### Manually\n\nAdd the script to your HTML:\n\n```html\n\u003cscript src=\"../path/to/your/(npm|bower)_components/angular-keybind/dist/angular-keybind.js\"\u003e\u003c/script\u003e\n```\n\n##Dependencies\n\n- Angular.js (^1.4.0)\n\n\n## Usage\nInclude `bc.AngularKeybind` as a dependency in your project:\n\n```javascript\nangular.module('YourModule', ['bc.AngularKeybind']);\n```\n\nUse the directive as an attribute on any element that can be focused _(it doesn't need to be an\ninput)_. It will listen for keypress events on the element and fire the associated method.\n\n```html\n\u003c!--\n  13 is the key code for 'enter'\n  32 is the key code for 'space'\n--\u003e\n\u003cinput\n  bc-keybind\n  bc-keys=\"['13, '32']\"\n  bc-method=\"vm.myMethod\"\n\u003e\n\u003c!--\n  Notice! When passing in the method reference, parenthesis `()` should not be added.\n--\u003e\n```\n\n```javascript\nexport class YourController {\n\n    constructor() {}\n\n    // I will be called if either enter or space is triggered while the element has focus\n    myMethod(event) {\n        console.log('One of our keys was pressed!');\n        console.log('Original event object: ', event);\n    }\n\n}\n```\n\n\u003e [:tv: Demo][demo]\n\n### Attributes\n\nMost use cases will only need to use `bc-keys` and `bc-method`. For more advanced cases, a second\nand third set of attributes can be used.\n\n| Attribute    | Accepts | Details |\n|--------------|---------|---------|\n| `bc-keys`    | Array   | Expects an array of key codes |\n| `bc-method`  | Method  | Expects a method which will be called when a keypress matches one of the keys passed into `bc-keys` |\n| `bc-keys2`   | Array   | Expects an array of key codes |\n| `bc-method2` | Method  | Expects a method which will be called when a keypress matches one of the keys passed into `bc-keys2` |\n| `bc-keys3`   | Array   | Expects an array of key codes |\n| `bc-method3` | Method  | Expects a method which will be called when a keypress matches one of the keys passed into `bc-keys3` |\n\n\u003e Learn more about keycodes on [css-tricks][keycodes]\n\n```html\n\u003c!--\n  In this more advanced use-case we need 'enter' to trigger a specific method.\n  We also need a separate method to be triggered when any arrow key is used.\n--\u003e\n\u003cinput\n  bc-keybind\n  bc-keys=\"['13']\"\n  bc-method=\"vm.myMethodForEnter\"\n  bc-keys2=\"['37', '38', '39', '40']\"\n  bc-method2=\"vm.myMethodForArrows\"\n\u003e\n```\n\n```javascript\nexport class YourController {\n\n    constructor() {}\n\n    // I will be called if any key from the `bc-keys` array is used while the element has focus\n    myMethodForEnter(event) {\n        console.log('One of the `bc-keys` keys was pressed! Pressed key: ', event.which);\n    }\n\n    // I will be called if any key from the `bc-keys2` array is used while the element has focus\n    myMethodForArrows(event) {\n        console.log('One of the `bc-keys2` keys was pressed! Pressed key: ', event.which);\n    }\n\n}\n```\n\n\u003e [:tv: Demo][demo]\n\n\n## Development\n\n- `npm run build` - Build JS\n- `npm run watch` - Watch JS and rebuild on change\n- `npm run test` - Run tests\n- `npm run watch:tests` - Watch for changes in `.spec.js` files and re-run the tests\n\n\n\n\n[issues]: https://github.com/benjamincharity/angular-keybind/issues\n[demo]: http://codepen.io/benjamincharity/pen/ALzOwo?editors=1001\n[demo_collection]: http://codepen.io/collection/XEyqxM/\n\n[ng_keyup]: https://docs.angularjs.org/api/ng/directive/ngKeyup\n[keycodes]: https://css-tricks.com/snippets/javascript/javascript-keycodes/\n\n[coveralls_badge]: https://coveralls.io/repos/github/benjamincharity/angular-keybind/badge.svg?branch=master\n[coveralls_link]: https://coveralls.io/github/benjamincharity/angular-keybind?branch=master\n[license_image]: http://img.shields.io/badge/license-MIT-blue.svg\n[license_url]: LICENSE\n[npm_url]: https://npmjs.org/package/angular-keybind\n[npm_version_image]: http://img.shields.io/npm/v/angular-keybind.svg\n[circle_badge]: https://circleci.com/gh/benjamincharity/angular-keybind/tree/master.svg?style=svg\n[circle_link]: https://circleci.com/gh/benjamincharity/angular-keybind/tree/master\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-keybind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamincharity%2Fangular-keybind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-keybind/lists"}