https://github.com/miller45/fnkg-keytranslator

Translates the KeyboardEvent.key code
https://github.com/miller45/fnkg-keytranslator

Last synced: 2 months ago
JSON representation

Translates the KeyboardEvent.key code

• Host: GitHub
• URL: https://github.com/miller45/fnkg-keytranslator
• Owner: miller45
• License: other
• Created: 2019-02-27T21:56:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-25T10:37:52.000Z (over 2 years ago)
• Last Synced: 2024-10-05T23:17:36.591Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 31.3 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://img.shields.io/npm/v/fnkg-keytranslator.svg)](https://www.npmjs.com/package/fnkg-keytranslator)

[![CI](https://github.com/miller45/fnkg-keytranslator/workflows/Node%20CI/badge.svg)](https://github.com/miller45/fnkg-keytranslator/actions)

[![codecov](https://codecov.io/gh/miller45/fnkg-keytranslator/branch/master/graph/badge.svg)](https://codecov.io/gh/miller45/fnkg-keytranslator)

# fnkg-keytranslator

Translates the KeyboardEvent.key code (which is the "offical" successor of KeyboardEvent.keyCode) to a value common on all browsers.

_The KeyboardEvent.keyCode is deprecated according to this source: https://developer.mozilla.org/de/docs/Web/API/KeyboardEvent/keyCode.

If you are using typescript and are using the keyCode you are probably seeing the 'keyCode is deprecated' message'._

The problem with using the successor KeyboardEvent.key, is that the codes differ among browsers (see https://caniuse.com/#search=KeyboardEvent.key).

This package provides the function KeyTranslate which will translate any given Event parameter to a uniform 'key' result which

conforms to this standard: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

The 'key' value can then be used in conjunction with the package ts-key-enum : https://www.npmjs.com/package/ts-key-enum.

# TypeScript Example

```typescript

import {Component, OnInit} from '@angular/core';

import {KeyTranslate} from 'fnkg-keytranslator';

import {Key} from 'ts-key-enum';

@Component({

    selector: 'app-keyco',

    template: '',

})

export class TestComponent {

    onKeydown(event: KeyboardEvent) {

        const tkey = KeyTranslate(event);

        switch (tkey) {

            case Key.ArrowUp:

                // do something when user pressed the directional up key.

                console.log('up');

                break;

            case Key.ArrowDown:

                // do something when user pressed the directional down key.

                console.log('down');

                break;

        }

    }

}

```