Keypress: A Javascript library for capturing input

http://dmauro.github.io/Keypress/

by nsmalch • 13 years ago

192 55 13 years ago

dmauro.github.io

stephen• 13 years ago

Tangentially, can someone on the W3C please fix the sorry state of key bindings across UAs?

Cross-browser idiosyncrasies are finally improving...except for webapp key bindings. Alt-F is taken in IE, Ctrl-whatever is taken in other UAs. Or an extension like (the awesome) vimium conflicts with some key bindings, so you have to disable it all together.

To the point where Asana uses tab as their short cut key. Tab! Wtf! "tab-p" for project. Bizarre!

But I guess I can't blame them, as I wouldn't be surprised if it's the only shortcut modifier that wasn't taken yet across all UAs.

I admittedly have no solutions to propose, so am just ranting about an understandably hard problem...but it would be nice if someone came along and fixed this. Please. :-)

hayksaakian• 13 years ago

Isn't tab commonly bound to the meta key?

I don't personally do it, but its not unheard of ------

Groxx3• 13 years ago

I think that Asana's aren't actually tab and p, they're tab then p. Or at least that's true for all the ones I use. Given that, tab just takes focus out of whatever default / current text field the cursor is in, so 'p' is unambiguously a command and not a letter.

RachelF• 13 years ago

Looks great.

tommaxwell• 13 years ago

Ooh, I could use this in a project I'm working on. Thanks!

aroman• 13 years ago

Looks great. I was impressed that the keyboard visualization handled up to 7 simultaneous button pressed on my physical keyboard. Honestly, I wasn't aware my keyboard's wiring (MacBook Air) was capable of handling that.

dpham2• 13 years ago

It doesn't have to do with hardware, it's just client-side implementation. I had to write code for multiple key presses before. The browser will normally trigger a keydown and keyup event whenever something is pressed and released. The trick is to keep an array of keyCodes representing current keydowns; during keydowns add to array and during keyups, remove from array.

anonova• 13 years ago

It is hardware related. USB has a maximum rollover limitation of 6 keys + 4 modifiers. Though keyboards can have n-key rollovers (i.e., greater than 10 keys simultaneously), you have to use PS/2.

See https://en.wikipedia.org/wiki/Rollover_(key)

whisk3rs• 13 years ago

Nice. This seems to solve a common problem for developers building rich UIs.

On a similar topic, does anybody have any pointers for implementing keystroke-by-keystroke character replacement in an INPUT box that doesn't suck? I'd like users to be able to enter "townhall" but have the input value be "TOWNHALL" and there doesn't seem to be a simple way to do this that doesn't fail when the user uses the arrow key or wants to insert more than one character in the middle of an input box.

redler• 13 years ago

It's a bit of a workaround, but one approach is to split the problem into two pieces: display and transmission. For display, you can avoid the cursor problems by using:

  text-transform: uppercase;

It's simple, the user experience remains natural, and there are no JavaScript dependencies. For the transmission phase, simply munge the actual entered content (which will not be all uppercase unless the user enters it as such) during the submit event. Of course you'll want to validate input on the server side as well.

Edit: clarity.

meemoo• 13 years ago

My biggest issue is wanting to bind ctrl/meta-x/c/v to do what you think they would do in my UI (a graph editor), but not do anything in input fields. I can stopPropagation, but it is a pain to keep track of.

renekooi• 13 years ago

You can attach an event to the window or some other higher-level element and check if event.target is an input field... something along the lines of:

    document.body.addEventListener('keydown', function(e) {
      if (e.target.tagName !== 'INPUT') doKeyBindings();
    }, false);

dpham2• 13 years ago

This looks like https://github.com/ccampbell/mousetrap I'm much more fond of the implicit syntax of mousetrap though.

dmauro3• 13 years ago

I have referred people to Mousetrap in the past that don't have need of some of the more advanced features that Keypress offers. I wrote Keypress because there was nothing to support some of the more complex, game-specific things I wanted to do with keyboard combos.

paulirish• 13 years ago

Obligatory link to the fantastic http://unixpapa.com/js/key.html

leeoniya• 13 years ago

additionally, good and concise http://www.javascripter.net/faq/keycodes.htm

gprasanth• 13 years ago

Also this: http://craig.is/killing/mice

hatsix• 13 years ago

Also this: http://keithcirkel.co.uk/jwerty/

osipovas• 13 years ago

I see the potential for reading key presses when people are entering data into a form. I look forwarding to investigating this. Thank you!

thenerdfiles2• 13 years ago

iPad keyboard data entry firm that farms keypresses via HTTP to solve newly discovered cancer systems or other genetic puzzles.

At least give data enterers feedback, WPM, errors. Elderly can do data entry while on a walk to the park, and afford their peppermints.

agumonkey• 13 years ago

pressing as many keys as possible makes me wonder how is wired my keyboard, I can get all 8 'asdf' and 'uiop' in down state, but not 'asdf' 'hjkl' nor 'qwer' 'hjkl' .. funny

tydok• 13 years ago

That's keyboard ghosting.

http://en.wikipedia.org/wiki/Rollover_%28key%29#Key_jamming_...

http://www.microsoft.com/appliedsciences/antighostingexplain...

rcfox• 13 years ago

Looks neat, but how do you write a keyboard input library with sequence combos and then not have the Konami code as a secret demo?

dmauro3• 13 years ago

Ha, fair point. I should get on that :)

frozenport• 13 years ago

Pause/break not working in Firefox 24.0 on Windows x64 8.

dancecodes• 13 years ago

suggestion: add to console echo when pressed something in your demo

Stratoscope2• 13 years ago

This is such nice work that I hesitate to bring up a minor point of coding style... But the use of names_with_underscores looks out of place in JavaScript.

JavaScript code traditionally uses PascalCaseNames for constructors and camelCaseNames for variables, properties, and methods. You do see UPPERCASE_NAMES_WITH_UNDERSCORES used sometimes for "constants", but that's about it.

Of course, names_with_underscores work just as well as any other names, and some people use them in their own JavaScript code, but I think libraries should follow the traditional native conventions of their language.

It would be like releasing a Ruby library that used camelCaseNames for its method names. It would work, but many Ruby developers would feel that those names were a bit out of place in a language where method names customarily use underscores.

Mentioning it here basically just as a reminder for other library developers: "When in Rome..."

ars• 13 years ago

I don't think the language gets to decide the coding style. Only the programmer gets to do that.

Especially if you program in multiple language it can be jarring to switch styles for each language.

Stratoscope2• 13 years ago

That's a good point, and I run into that problem myself. I prefer camelCaseNames over names_with_underscores in just about any language. When I write Ruby code for myself I sometimes use camelCaseNames just because I like them better.

But if I'm writing code for someone else I try to follow the language's conventions if possible. Especially if it's a library that will be combined with other libraries and application code that does follow native conventions.

After all, it's also jarring to write code in one language that has to use multiple styles because it integrates libraries that weren't consistent with the common language conventions.

taspeotis3• 13 years ago

Sure, but a lot of languages are so closely related to their "standard library" that you adopt the style of the "standard library"

Take C# and the BCL. C# is a language but you'd be hard pressed to avoid using the BCL in any meaningful C# program.

    String.Format("Hello {0}", stringVariable);

All (nearly all?) the function names in the BCL are UpperCamelCase, and a lot of C# code follows that as a convention.

Repeat for class names, interfaces prefixed with I, public properties etc.

Kudos• 13 years ago

Python adopted a styleguide and I don't think I've seen any modern Python using camel case since. If anyone was to use camel case, they would be presumed to be a beginner.

http://www.python.org/dev/peps/pep-0008/

rtpg• 13 years ago

I change keyboard layouts depending on (natural) language, though that's just personal preference.

I think that flexibility of style has been getting less and less favor recently : a lot of languages are starting to "force" some elements (such as indentation) , and go has done the most intelligent thing ever and ships with a formatter so that there's only 1 "right" way to write things.

Formatting issues is the source of so much bike-shedding, despite that it really shouldn't be much of a productivity sink in 99.9% of situations.

deathanatos2• 13 years ago

XMLHttpRequest.

Tloewald• 13 years ago

To be fair — introduced by microsoft.

WickyNilliams• 13 years ago

Constructor, so is valid

ams6110• 13 years ago

I've seen both conventions; also in other languages, CSS class names ('-' vs '_' vs camelCase), e.g. anywhere a "name" is created to refer to something. Do try to not get hung up on it, it's mostly a matter of developer preference and you'll never get universal agreement unless the language itself enforces or excludes a particular convention.

taspeotis3• 13 years ago

Is it meant to work with all the keys? Chrome 29:

Open page
Don't touch anything
Type

    this is a test

> Now you've moved down three times.

guru1206• 13 years ago

the spacebar makes the page scroll down

taspeotis3• 13 years ago

Yes, I have used a web browser before today.

It doesn't work unless you interact with elements on the page first, in which case the library catches space.

Hence my instruction not to touch anything on the page.

arnehormann• 13 years ago

I built a demo with some similarities 7 month ago (EDIT - that's not a plagiarism charge, the OPs submission predates mine and was created a year ago). https://gist.github.com/arnehormann/4163916 for the source and http://bl.ocks.org/arnehormann/raw/4163916/keycodes.html for the demo. The code is documented and includes a konami code and a mode switching example. It's set to a German Windows keyboard layout, but the code includes comments on how to change that.

thenerdfiles2• 13 years ago

This will do to onscreen keyboards what Wordpress did to onscreen journals.

gren• 13 years ago

I know the mess is in the OS-side but is there any chance we will have some day a DOM API independent of the keyboard layout?

For instance you want to make a game using WSAD keys, well in a french keyboard it's ZSQD... Also in a French keyboard, there some keys which trigger the same keycode so you cannot differenciate them! (I think it was the comma with something else)

If you want to make a software like Blender on the web which have a lot of key shortcuts you are a bit screwed!

Too• 13 years ago

If you use this for hotkeys in your application make sure to return false or set e.handled to true or something like that. I don't remember the exact details right now.

Otherwise features from the browser like "incremental search" in firefox will get priority over the key captures in your app. In fact both your key capture and the incremental search will trigger which is very frustrating as the page starts scrolling to the first match of the letter you just typed.

But be very careful while doing this. Only do it for for your own hotkeys and make sure they are not used for other hotkeys in most common browsers! If you always swallow the keypress, normal hotkeys like ctrl+t for new tab will stop working for the user also.

pyalot2• 13 years ago

Note that you should avoid using this (or anything else with JS) to emulate shortcuts.

The reason is because what this usually looks like "oh nice I can define shortcuts people can press". What it actually means is: "Ohcrap, that shortcut only works for US-US 104 keyboard layouts, and about 80% of people can't press that shortcut".

For example: suppose you want a shortcut for shift+/, which is for the US keyboard under the small right finger. But that shortcut can't be defined for SG (swiss-german) because there the / is on the numeric bar where 7 is. So if you assume (for whatever reason) that left+right small finger is a convenient shortcut, and left small finger + right index finger top isn't, then you're totally screwed. Instead, to reach the right small finger low on swiss german, you'd have to define shift + "-". Except that if you define that, it'll be one of the most uncomfortable keyboard shortcuts imaginable for US users, which find - on the numeric row top --> bottom left small finger + top right small finger = ugh.

The truth is that you cannot do reasonable shortcut definition the way that everybody would like to with JS... yet.

But wait, can't you like, define some reasonable presets and let people choose their own? The answer is no, because you don't have a reliable way to translate a keydown/keyup to a unicode char, and the unicode char is related to the modifier keys, not the key cap, so though you can do that shortcut definition, you can't show to the user what that shortcut definition actually is, because it'd be either undefined or completely wrong.

I've written at length about this here: http://codeflow.org/entries/2013/jan/30/keyboard-events-in-j...

jakub_g• 13 years ago

One small nitpick to your article: in Poland, QWERTY is the standard computer keyboard layout. QWERTZ used to be one in the old typewriters, but I haven't seen a single comp user with it.

ville• 13 years ago

But wait, can't you like, define some reasonable presets and let people choose their own? The answer is no, because you don't have a reliable way to translate a keydown/keyup to a unicode char, and the unicode char is related to the modifier keys, not the key cap, so though you can do that shortcut definition, you can't show to the user what that shortcut definition actually is, because it'd be either undefined or completely wrong.

But couldn't you let the user write the shortcut in a text field, capture the keycodes from the keydown/keyup events and the char from the text field?

Edit: This obviously doesn't work for shortcuts that do not produce any text, such as F-keys. But couldn't you at least get normal keys right most of the time?

Groxx3• 13 years ago

That's kind of what I was thinking. Add to that a 20-questions thing to check which keyboard layout they're using, and you can probably uniquely detect almost every keyboard layout (minus custom, of course) in a couple keypresses.

But if you're going this far, you're probably significantly better off just letting people remap their shortcuts if it doesn't match what 95% of your users are using. The ones that care will love you for it, the ones that don't probably wouldn't have used it or been interested in 20-questions anyway.

jfaucett• 13 years ago

"The truth is that you cannot do reasonable shortcut definition the way that everybody would like to with JS... yet."

couldn't agree more (learned the hard way), doing shortcuts with js is like translating your app into 50 different languages but only for half the keys - it creates a jumbled mess - best practice here is to never even do it.

joliss• 13 years ago

How about single-letter shortcuts, like GitHub does? Press the ? key on GitHub to get the shortcut list. Some might not be as comfortable (e.g. / on a Swiss-German keyboard, as you say), but they'll still mostly work.

jgalt212• 13 years ago

pyalot's points are relevant for the consumer web, but for software as a service world I'd say not as much because you know more about your customers and can either guess their keyboard or simply ask them.

ChristianBundy• 13 years ago

This just looks like a development implementation of http://keycodes.atjayjo.com/

Keypress: A Javascript library for capturing input

Related Stories