Socket
Socket
Sign inDemoInstall

is-printable-key-event

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

is-printable-key-event

Detect whether a KeyboardEvent is caused by a printable key


Version published
Weekly downloads
4.8K
decreased by-12.51%
Maintainers
1
Weekly downloads
 
Created
Source

is-printable-key-event

Detect whether a DOM KeyboardEvent key event is printable; that is, typed by a user. This is useful for custom input components that need ignore control keys such as Alt and only be triggered when 'regular', printable keys are pressed such as a or .

Introduction

Detecting whether a DOM UI event key is printable has become more complicated since KeyboardEvent.keyCode was deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), as you can no longer simply specify the ranges of printable key codes (an approach chosen by https://github.com/mynamesleon/is-printable-keycode).

Instead, we rely on the W3C UI Events KeyboardEvent specification to determine whether a keyboard event is caused by a printable key press. A printable key here is defined by the W3C spec as a "key string", i.e. a "character typed by the user". To do this, we check the event's key attribute against a list of known non-printable keys (called "named key attribute values"). If the key is not in this list, we determine it to be printable.

Usage

import isPrintableKeyEvent from "is-printable-key-event";

element.addEventListener("keydown", function (event) {
  if (isPrintableKeyEvent(event) === false) {
    return; // ignore key down
  }

  // do something with input
});

References

https://www.aarongreenlee.com/blog/list-of-non-printable-keys-for-keyboard-events-when-using-event-key/ https://www.w3.org/TR/uievents-key/

Keywords

FAQs

Package last updated on 08 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc