Easy keybindings for browser applications!

Related tags

Learning resource keys.js
Overview

Keys.js

For a quick look at the kind of solution that Keys.js is intended to provide, check out the demo application.

This project spawned out of a Chrome extension I was working on where I kept handling more and more key combinations for shortcut actions, until it eventually became an unmaintainable rats nest. Obviously I needed a solution, and Keys.js was born.

Installation

$ npm install --save keys.js

Status

Stable, but it's a new project, so as always, caveat emptor. The documentation is very close to comprehensive, but some work needs to be done. The test suite is comprehensive, and very few gaps are left to fill there that are meaningful. Please help me identify any gaps in functionality, testing, or docs, by submitting issues so that I can prioritize things as needed. The current list of things I am working on is as follows:

  • Implement locale selection, locale loading
  • Implement Sequences (non-chord key combinations)
  • Implement scoped bindings (only execute a binding if focus is within the scope of a given element)
  • Comprehensive documentation (good progress already)
  • Discover additional use cases that aren't covered as well as they could be
  • Implement a faux-Vim example to demonstrate a complex usecase of keybindings in a web application.

Check out the Keys.js home page for information on browser support, dependencies, examples, and in-depth description of how Keys.js works.

License

MIT

See LICENSE file

You might also like...

A simple library for Node and the browser that allows you to rapidly develop stateful, socketed multiplayer games and web applications.

gameroom.js Overview gameroom.js is a simple library for Node and the browser that allows you to rapidly develop stateful, socketed multiplayer games

Nov 3, 2022

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light 7ko min.js and 1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Jan 18, 2022

An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi

Aug 29, 2022

Build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Improve your sites SEO with quick and easy Rich Results.

schema-org-graph-js The quickest and easiest way to build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Status: 🔨 In Development Pl

Dec 21, 2022

An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon class in an input element.

Font Awesome Browser An easy-to-use jQuery plugin that allows the user to pick an icon from a responsive icon browser and shows the corresponding icon

May 1, 2021

CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for easy distribution and without installation on the Google Chrome Browser. Powered by Unicorn.js, Capstone.js, Quasar and NASM.

CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for easy distribution and without installation on the Google Chrome Browser. Powered by Unicorn.js, Capstone.js, Quasar and NASM.

CPUSim - A Graphical CPU Simulator CPUSim is an open-source web-based animated x64 CPU simulator for educational purposes. Provided as a folder for ea

Oct 26, 2022

A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose

Dec 24, 2022

Browser In The Browser (BITB) attack is a sophisticated phishing and hard to detect.

Browser In The Browser (BITB) attack is a sophisticated phishing and hard to detect.

BITB Browser In The Browser (BITB) attack is a sophisticated phishing and hard to detect. Goto: 👉 MacOS-Chrome-DarkMode 👉 MacOS-Chrome-LightMode 👉

Dec 4, 2022

UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. Supports browser & node.js environment.

UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. Supports browser & node.js environment.

UAParser.js JavaScript library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data with relatively small footprint (~17KB m

Jan 4, 2023
Comments
  • CC BY-SA might be a bad idea

    CC BY-SA might be a bad idea

    If you choose a copyleft license for software, please choose one that’s compatible with as many other licenses as possible. Unfortunately, that’s not the case for CC BY-SA (which, BTW, was probably not meant really for software where there are plenty of licenses already).

    If you want a license with copyleft: you can choose, among others:

    • Mozilla Public License version 2 (compatible with GNU GPLv3 and Apache License v2)
    • GNU General Public License version 3
    • or also the AGPL or the LGPL…
    opened by hugoroy 3
  • Simple bootstrap problem

    Simple bootstrap problem

    When I resize my window the twitter bootstrap's css make the demo looks like this:

    keys js-bootstrap-problem

    its very simple to solve, if you reorder the <link> tags it works.

    I will submit a pull request for that!

    bug demos 
    opened by wmartins 0
  • webpack support?

    webpack support?

    Any plans to support Webpack?

    If I include the library via bower, works as expected but using webpack I am getting the following error:

    keys.js:959 
Uncaught TypeError: Cannot read property 'addEventListener' of undefined

    it seems the library being loaded by webpack does not get initialized properly -- global is null

    opened by irobayna 1
Releases(0.2.1)

  • 0.2.1(Jan 28, 2014)

    CHANGELOG

    • The keypress event is now available in the handler in case you need access to it.
    • Added ability to unregister a handler
    • Changed license to LGPLv2.1
    Source code(tar.gz)
    Source code(zip)

  • 0.2.0(Jul 3, 2013)

    CHANGELOG

    Breaking Changes

    • Keys.js now loads itself into the Keys namespace on initialization. You will have to make sure that you either create aliases for the Bindings, Combo, and Key classes, or reference them with the fully qualified name, ex. Keys.Bindings.

    Newly Added

    • Added Bindings.load method, which allows you to fully specify both bindings and handlers for your entire application with one call. This can drastically simplify configuration code. See documentation for examples and more detail.
    • Added description property to bindings, and can now be passed as a parameter to Bindings.add, or as a property of the specification object passed to Bindings.load. This can be used to provide a friendly name for your presentation layer, should you wish to list bindings programmatically.

    New Behavior

    • By default, handlers are not executed in the context of input, textarea, or select elements. Can be overridden with isGlobal boolean flag as last parameter provided to Bindings.registerHandler, or as a property of the specification object passed to Bindings.registerHandlers, and Bindings.load.

    Bugs Fixed

    • Do not prevent default input behavior when a binding is unhandled
    • Fix case-sensitivity issue in Key.fromName
    Source code(tar.gz)
    Source code(zip)
    keys.min.js(14.09 KB)
Owner
Paul Schoenfelder
Paul Schoenfelder
GitHub http://bitwalker.github.io/keys.js/
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A collection of Aurelia 2 example applications showcasing how to build Aurelia 2 applications and other tasks.

Aurelia 2 Examples A monorepository of a treasure trove of Aurelia 2 example applications you can use as a guide to help you build your own applicatio

aurelia 12 Dec 29, 2022
An affordable and easy-to-use monitoring tool for your AWS serverless applications.

AWS Serverless Applications Monitoring Tool Table of Contents Motivation for Project Getting Started AWS End Users Installation and Setup Lambda Metri

OSLabs Beta 54 Sep 21, 2022
A easy-to-use framework for building immersive decentralized applications

A easy-to-use framework for building immersive decentralized applications

Sonr 624 Dec 27, 2022
Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.

SPA Check Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things e

Cory Leigh Rahman 5 Dec 23, 2022
Refresh - Simple browser reload on file change middleware for your Deno web applications.

refresh Simple browser reload on file change middleware for your Deno web applications. Usage To use refresh middleware, just add a few extra lines to

Craig Morten 13 Dec 19, 2022
A fast, feature rich and simple framework for building dynamic browser applications.

hyperdom A simple, fast, feature rich framework for building dynamic browser applications. Hyperdom supports a simple event-update-render cycle, promi

Featurist 163 Nov 11, 2022
enables communication between command-line or desktop applications and browser-based Ethereum wallets such as Metamask.

@securerpc/walletbus @securerpc/walletbus Abstract Quickstart Installation Usage Ethers.js Web3.js Configuration options Logging Development Automated

Manifold Finance 8 Dec 27, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022