Giter Club home page Giter Club logo

jqkeyboardapi's Introduction

jQKeyStroke

After working on a fix for a JavaScript function uses to trap users' keyboard input through jQuery's keydown event at work, I noticed the function was getting messy and had several extended if-else statements. So I had this bright idea of cleaning it up. well, it turns out it isn't that simple.

The problem

  • the keydown event's keycodes don't translate to string characters very well through String.fromCharcode(), unlike keypress.
  • the keypress event doesn't always get triggered (ALT+keys, CTRL+keys, and function keys to name a few).
  • in general, the keyboard events are a mess.

Anyway, I thought after pouring a ton of work trying to understand the issue, I might as well try to fix it at a deeper level than just cleaning up. And so, I created this KeyboardAPI project. I named it pretty broadly because I have a feeling I will be working on extending this in many different ways. The likely next will probably be key mapping. I've been hearing that word pass back and forth.

Features

The idea here is to simplified all the different events into one custom event, "keystroke", for you to attach your scripts to, like an API of sort. Imagine that!

To start using the keystroke event, just attach the jQKeyStroke to your keydown and keypress: jQuery(document).on("keydown", jQKeyStroke ).on("keypress", jQKeyStroke )

The event would get trigger once either during keydown, or keypress, and pass the commonly used data about the key to your function. This means you only need to attach your script to this custom "keystroke" event.

The object passed to the keystroke event looks like this:

var keyData = { 
    origin    : event,
    which     : event.which,
    altKey    : event.altKey || false,
    ctrlKey   : event.ctrlKey || false,
    shiftKey  : event.shiftKey || false,
    char      : null,
    category  : null
};

I've already identified it as either

"CHARACTER_KEY" : String.fromCharCode()
"COMMAND_KEY" 	: Ctrl, Alt, Tab and the likes (any keys with keydown's keycode less than 47
"FUNCTION_KEY" 	: F1 to F12 keys
"SHORTCUT_KEY"  : Alt + or Ctrl + character key (with or without Shift)

After some light testing, it seems like this technique works with the key being held down. The event should be triggered correctly. However, you wouldn't be able to detect when the key is let go since I'm not checking for keyup event.

Note: The original event object can be access through the "origin" property of this object.

jqkeyboardapi's People

Contributors

mayppong avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.