Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Can register characters for keypress command, not just codes #482

Closed
wants to merge 2 commits into from

2 participants

@dturkenk

Can register an actual character in the keypress, keyup and keydown
directives (e.g. 'a' instead of 65/97)

Handles the different values for keycodes on keyup/down and keypress
both with and without JQuery.

Tested with automated tests, IE9, latest Chrome and Firefox on Windows

Important: characters will be converted to lower-case. If you want to capture an upper-case character, use "shift-char"

dturkenk added some commits
@dturkenk dturkenk Can register characters for keypress command, not just codes
Can register an actual character in the keypress, keyup and keydown
directives (e.g. 'a' instead of 65/97)

Handles the different values for keycodes on keyup/down and keypress
both with and without JQuery.

Tested with automated tests, IE9, latest Chrome and Firefox on Windows
7.
470f260
@dturkenk dturkenk Fixed issue with shift-char
Using a modifier key should work with the character.

IMPORTANT: characters will be converted to lower-case. If you want to
capture only an upper-case character, use shift-char.
bbaf811
@ProLoser
Owner

Do you mind relocating this to https://github.com/angular-ui/ui-utils ?

@dturkenk

Will do. I'll move it it over there in the next few days.

Thanks.

@dturkenk

Partially ported this to ui-utils project.

Closing the pull request here.

@dturkenk dturkenk closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 11, 2013
  1. @dturkenk

    Can register characters for keypress command, not just codes

    dturkenk authored
    Can register an actual character in the keypress, keyup and keydown
    directives (e.g. 'a' instead of 65/97)
    
    Handles the different values for keycodes on keyup/down and keypress
    both with and without JQuery.
    
    Tested with automated tests, IE9, latest Chrome and Firefox on Windows
    7.
  2. @dturkenk

    Fixed issue with shift-char

    dturkenk authored
    Using a modifier key should work with the character.
    
    IMPORTANT: characters will be converted to lower-case. If you want to
    capture only an upper-case character, use shift-char.
This page is out of date. Refresh to see the latest.
View
87 modules/directives/keypress/keypress.js
@@ -1,20 +1,64 @@
angular.module('ui.directives').factory('keypressHelper', ['$parse', function keypress($parse){
+ // keymaps from http://unixpapa.com/js/key.html
+ var keyupdownmap = {
+ 8: 'backspace',
+ 9: 'tab',
+ 13: 'enter',
+ 27: 'esc',
+ 32: 'space',
+ 33: 'pageup',
+ 34: 'pagedown',
+ 35: 'end',
+ 36: 'home',
+ 37: 'left',
+ 38: 'up',
+ 39: 'right',
+ 40: 'down',
+ 44: ',',
+ 45: 'insert',
+ 46: 'delete',
+ 91: 'leftwindows',
+ 92: 'rightwindows',
+ 93: 'windowsmenu',
+ 96: '0',
+ 97: '1',
+ 98: '2',
+ 99: '3',
+ 100: '4',
+ 101: '5',
+ 102: '6',
+ 103: '7',
+ 104: '8',
+ 105: '9',
+ 106: '*',
+ 107: '+',
+ 109: '-',
+ 110: '.',
+ 111: '/',
+ 186: ';',
+ 187: '=',
+ 188: ',',
+ 189: '-',
+ 190: '.',
+ 191: '/',
+ 192: '`',
+ 219: '[',
+ 220: '\\',
+ 221: ']',
+ 222: '\'',
+ 224: 'command'
+ };
+
var keysByCode = {
- 8: 'backspace',
- 9: 'tab',
- 13: 'enter',
- 27: 'esc',
- 32: 'space',
- 33: 'pageup',
- 34: 'pagedown',
- 35: 'end',
- 36: 'home',
- 37: 'left',
- 38: 'up',
- 39: 'right',
- 40: 'down',
- 45: 'insert',
- 46: 'delete'
+ 'keyup' : keyupdownmap,
+ 'keydown': keyupdownmap,
+ 'keypress' : {
+ 8: 'backspace',
+ 9: 'tab',
+ 13: 'enter',
+ 27: 'esc',
+ 32: 'space'
+ }
};
var capitaliseFirstLetter = function (string) {
@@ -36,7 +80,7 @@ angular.module('ui.directives').factory('keypressHelper', ['$parse', function ke
keys: {}
};
angular.forEach(variation.split('-'), function (value) {
- combination.keys[value] = true;
+ combination.keys[value.toLowerCase()] = true;
});
combinations.push(combination);
});
@@ -48,17 +92,16 @@ angular.module('ui.directives').factory('keypressHelper', ['$parse', function ke
var altPressed = event.metaKey || event.altKey;
var ctrlPressed = event.ctrlKey;
var shiftPressed = event.shiftKey;
- var keyCode = event.keyCode;
+ var keyCode = event.which || event.keyCode;
- // normalize keycodes
- if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) {
- keyCode = keyCode - 32;
+ if (keyCode >= 65 && keyCode <= 90)
+ {
+ keyCode = keyCode + 32;
}
-
// Iterate over prepared combinations
angular.forEach(combinations, function (combination) {
- var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false;
+ var mainKeyPressed = (combination.keys[keysByCode[mode][keyCode]] || combination.keys[keyCode.toString()] || combination.keys[String.fromCharCode(keyCode)]) || false;
var altRequired = combination.keys.alt || false;
var ctrlRequired = combination.keys.ctrl || false;
View
13 modules/directives/keypress/test/keydownSpec.js
@@ -5,6 +5,7 @@ describe('uiKeydown', function () {
var createKeyEvent = function (mainKey, alt, ctrl, shif) {
var keyEvent = jQuery.Event("keydown");
+ keyEvent.which = mainKey;
keyEvent.keyCode = mainKey;
keyEvent.altKey = alt || false;
keyEvent.ctrlKey = ctrl || false;
@@ -64,4 +65,16 @@ describe('uiKeydown', function () {
element.trigger(createKeyEvent(13));
expect($scope.event2.keyCode).toBe(13);
});
+
+ it('should support pressing a text character', function() {
+
+ var elm = createElement({'a': 'event=true'}).trigger(createKeyEvent(65)); // 65 is IE/Mozilla key code for a
+ expect($scope.event).toBe(true);
+ });
+
+ it('should support pressing a non-text keyboard character', function() {
+
+ var elm = createElement({',': 'event=true'}).trigger(createKeyEvent(188)); // 188 is IE/Mozilla key code for ,
+ expect($scope.event).toBe(true);
+ });
});
View
152 modules/directives/keypress/test/keypressSpec.js
@@ -1,67 +1,87 @@
-describe('uiKeypress', function () {
-
- var $scope, $compile;
-
- var createKeyEvent = function (mainKey, alt, ctrl, shif) {
- var keyEvent = jQuery.Event("keypress");
-
- keyEvent.keyCode = mainKey;
- keyEvent.altKey = alt || false;
- keyEvent.ctrlKey = ctrl || false;
- keyEvent.shiftKey = shif || false;
-
- return keyEvent;
- };
-
- var createElement = function (elementDef) {
- var elementStr = angular.isString(elementDef) ? elementDef : angular.toJson(elementDef);
- return $compile("<span ui-keypress='" + elementStr + "'></span>")($scope);
- };
-
- beforeEach(module('ui.directives'));
- beforeEach(inject(function (_$rootScope_, _$compile_) {
- $compile = _$compile_;
- $scope = _$rootScope_.$new();
-
- $scope.cb = function (event) {
- this.event1 = event;
- };
- }));
-
- it('should support single key press', function () {
- createElement({'13': 'event=true'}).trigger(createKeyEvent(13));
- expect($scope.event).toBe(true);
- });
-
- it('should support combined key press', function () {
- createElement({'ctrl-shift-13': 'event=true'}).trigger(createKeyEvent(13, false, true, true));
- expect($scope.event).toBe(true);
- });
-
- it('should support alternative combinations', function () {
- $scope.event = 0;
- createElement({'ctrl-shift-14 ctrl-shift-13': 'event=event+1'}).trigger(createKeyEvent(13, false, true, true)).trigger(createKeyEvent(14, false, true, true));
- expect($scope.event).toBe(2);
- });
-
- it('should support multiple key press definitions', function () {
- var elm = createElement({'13': 'event1=true', 'ctrl-shift-13': 'event2=true'});
-
- elm.trigger(createKeyEvent(13));
- expect($scope.event1).toBe(true);
-
- elm.trigger(createKeyEvent(13, false, true, true));
- expect($scope.event2).toBe(true);
- });
-
- it('should support $event in expressions', function () {
-
- var element = createElement({'esc': 'cb($event)', '13': 'event2=$event'});
-
- element.trigger(createKeyEvent(27));
- expect($scope.event1.keyCode).toBe(27);
-
- element.trigger(createKeyEvent(13));
- expect($scope.event2.keyCode).toBe(13);
- });
+describe('uiKeypress', function () {
+
+ var $scope, $compile;
+
+ var createKeyEvent = function (mainKey, alt, ctrl, shif) {
+ var keyEvent = jQuery.Event("keypress");
+
+ keyEvent.which = mainKey;
+ keyEvent.keyCode = mainKey;
+ keyEvent.altKey = alt || false;
+ keyEvent.ctrlKey = ctrl || false;
+ keyEvent.shiftKey = shif || false;
+
+ return keyEvent;
+ };
+
+ var createElement = function (elementDef) {
+ var elementStr = angular.isString(elementDef) ? elementDef : angular.toJson(elementDef);
+ return $compile("<span ui-keypress='" + elementStr + "'></span>")($scope);
+ };
+
+ beforeEach(module('ui.directives'));
+ beforeEach(inject(function (_$rootScope_, _$compile_) {
+ $compile = _$compile_;
+ $scope = _$rootScope_.$new();
+
+ $scope.cb = function (event) {
+ this.event1 = event;
+ };
+ }));
+
+ it('should support single key press', function () {
+ createElement({'13': 'event=true'}).trigger(createKeyEvent(13));
+ expect($scope.event).toBe(true);
+ });
+
+ it('should support combined key press', function () {
+ createElement({'ctrl-shift-13': 'event=true'}).trigger(createKeyEvent(13, false, true, true));
+ expect($scope.event).toBe(true);
+ });
+
+ it('should support alternative combinations', function () {
+ $scope.event = 0;
+ createElement({'ctrl-shift-14 ctrl-shift-13': 'event=event+1'}).trigger(createKeyEvent(13, false, true, true)).trigger(createKeyEvent(14, false, true, true));
+ expect($scope.event).toBe(2);
+ });
+
+ it('should support multiple key press definitions', function () {
+ var elm = createElement({'13': 'event1=true', 'ctrl-shift-13': 'event2=true'});
+
+ elm.trigger(createKeyEvent(13));
+ expect($scope.event1).toBe(true);
+
+ elm.trigger(createKeyEvent(13, false, true, true));
+ expect($scope.event2).toBe(true);
+ });
+
+ it('should support $event in expressions', function () {
+
+ var element = createElement({'esc': 'cb($event)', '13': 'event2=$event'});
+
+ element.trigger(createKeyEvent(27));
+ expect($scope.event1.keyCode).toBe(27);
+
+ element.trigger(createKeyEvent(13));
+ expect($scope.event2.keyCode).toBe(13);
+ });
+
+ it('should support pressing a text character', function() {
+
+ var elm = createElement({'a': 'event=true'}).trigger(createKeyEvent(97)); // 97 is keypress code for a
+ expect($scope.event).toBe(true);
+ });
+
+ it('should support pressing shift and a text character', function() {
+
+ var elm = createElement({'shift-a': 'event=true'}).trigger(createKeyEvent(65,false,false,true)); // 65 is keypress code for A
+ expect($scope.event).toBe(true);
+ });
+
+
+ it('should support pressing a non-text keyboard character', function() {
+
+ var elm = createElement({',': 'event=true'}).trigger(createKeyEvent(44)); // 44 is keypress code for ,
+ expect($scope.event).toBe(true);
+ });
});
View
13 modules/directives/keypress/test/keyupSpec.js
@@ -5,6 +5,7 @@ describe('uiKeyup', function () {
var createKeyEvent = function (mainKey, alt, ctrl, shif) {
var keyEvent = jQuery.Event("keyup");
+ keyEvent.which = mainKey;
keyEvent.keyCode = mainKey;
keyEvent.altKey = alt || false;
keyEvent.ctrlKey = ctrl || false;
@@ -64,4 +65,16 @@ describe('uiKeyup', function () {
element.trigger(createKeyEvent(13));
expect($scope.event2.keyCode).toBe(13);
});
+
+ it('should support pressing a text character', function() {
+
+ var elm = createElement({'a': 'event=true'}).trigger(createKeyEvent(65)); // 65 is IE/Mozilla key code for a
+ expect($scope.event).toBe(true);
+ });
+
+ it('should support pressing a non-text keyboard character', function() {
+
+ var elm = createElement({',': 'event=true'}).trigger(createKeyEvent(188)); // 188 is IE/Mozilla key code for ,
+ expect($scope.event).toBe(true);
+ });
});
Something went wrong with that request. Please try again.