Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handle window.keyPress event in Aurelia app

I am wondering if anyone can provide any insight into how I would hook into the window.keyPress() event in an Aurelia app. I am looking to capture bar code scanner input and direct the scanned text into the appropriate input based on what the scanned value is.

I tried putting window.addEventListener("keypress", HandleKeyInput, false) in the activate() of my view model but this errors from the app-router with "HandleKeyInput is not defined" even though I have this function in my view model.

I am wondering what the correct approach for this scenario would be in regard to Aurelia.

like image 457
cbernsdorf Avatar asked Sep 17 '15 15:09

cbernsdorf


People also ask

How do I fire a keypress event from a document?

Save the document to initialize the class, and then press any key to fire a KeyPress event. In the Immediate window, the handler prints the ASCII code of the key that was pressed to fire the event. Have questions or feedback about Office VBA or this documentation?

What is keypress event in C #?

Keypress Event in C# 1 e.Keychar is a property that stores the character pressed from the Keyboard. Whenever a key is pressed the character is... 2 e.Handled is a property then assigned to true, it deletes the character from the keychar property. More ...

How does Aurelia automatically re-render a subscription?

Now the initial subscription receives the next state and changes the bound variable, Aurelia automatically figures out what changed and triggers a re-render. The next dispatch will then trigger the next cycle and so on.

How to make use of the Aurelia middleware?

In order to make use of it all, all you need to do is to register the middleware as usual. By default, the storage key will be aurelia-store-state. You can additionally provide a storage-key via the settings to be used instead.


1 Answers

Here's an example: https://gist.run?id=f7837c986c38adeac5a58b8007c28b2a

export class App {
  activate() {
    window.addEventListener('keypress', this.handleKeyInput, false);
  }

  deactivate() {
   window.removeEventListener('keypress', this.handleKeyInput);
  }

  handleKeyInput = (event) => {
    console.log(event);
  }
}

Some good reading:

  • http://www.quirksmode.org/dom/events/keys.html
  • http://www.quirksmode.org/js/keys.html
like image 73
Jeremy Danyow Avatar answered Oct 01 '22 23:10

Jeremy Danyow