https://github.com/javisperez/mousetrapdirectives
Some moustrap directives for angular
https://github.com/javisperez/mousetrapdirectives
angular angularjs directives keyboar-dshortcuts mousetrap mousetrap-directive moustrap-focus trigger
Last synced: about 2 months ago
JSON representation
Some moustrap directives for angular
- Host: GitHub
- URL: https://github.com/javisperez/mousetrapdirectives
- Owner: javisperez
- Created: 2016-03-13T14:24:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-13T18:05:15.000Z (over 10 years ago)
- Last Synced: 2026-01-17T08:35:36.766Z (5 months ago)
- Topics: angular, angularjs, directives, keyboar-dshortcuts, mousetrap, mousetrap-directive, moustrap-focus, trigger
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mousetrap Directives
Some moustrap directives for angularJS
# What is this?
This repo has two angular directives useful when you need to have easy keyboard access to basic app actions. It depends on mousetrapJS for the keyboard shortcuts
# About mousetrap
This module depends on [mousetrap](https://craig.is/killing/mice) which is a library for making keyboard shortcuts (and works great!).
Please check the [mousetrap documentation](https://craig.is/killing/mice) to see the posibilities of shortcuts combinations and more, i highly recommend it.
# The directives
So far i've just done two directives:
## mousetrap
The first directive is **mousetrap** which is a trigger of actions, based on keyboard shortcuts (as mousetrap works)
## mousetrap-focus
Another directive is **mousetrap-focus** which (as the name says) it will focus on a given field by pressing a keyboard shortcut.
# Install
You can use bower to install it:
`bower install --save mousetrap-directives`
Or you can download the zip on this repo and upload it to your server. Don't forget to include it in your html.
# Usage
Just include the module:
`mousetrap-directives`
in your angular app as dependency and bingo! you can use the directives.
# Examples
First, include it in your module:
```javascript
angular.module('app', ['mousetrap-directives']);
```
## mousetrap directive
Now, to use the mousetrap directive, in the html just:
```html
Open
```
Or you can just use a string, to trigger the click event (i.e. ng-click):
```html
Click me
```
that would fire the alert function when the **c** key is press (by triggering the ng-click attribute)
**Please notice** that if the tag is disabled, the moustrap actions wont fire, this is useful if you have a form that want to submit with keyboard only, but want to prevent disabled buttons to trigger anyway.
## mousetrap-focus directive
You can focus on a field by using just the keyboard, like this:
```html
```
When ctrl+b is pressed, the input will focus
**Please notice** that [mousetrap](https://craig.is/killing/mice) disable the keyboard shortcuts on input fields by default, so, if you want to trigger the hotkey on an input you must add a **mousetrap** class.