How do I get key values in HTML/Javascript

Question

Okay, so i understand how to get the key value while using an input field... but I am taking about key values that are pressed while your browser isn't focused in any text box or text area.

I am trying to make a onscreen keypad that has buttons for 0, 1, 2, .. 9... however I want the user to be able to press the buttons with the keys on the keyboard.

I've seen this done in some websites, where if you press the S key on the homepage, it will take you to the signin screen. Facebook also does the L key, to like a photo.

So the question is: How do I get the key values in javascript, when the cursor isn't focused.

David · Accepted Answer · 2013-08-07 22:09:44Z

4

If you are using JQuery you just add the event handler to the document...

$(document).keypress(function(event) {
      alert('Handler for .keypress() called. - ' + event.which);
});

(From http://forum.jquery.com/topic/how-to-catch-keypress-on-body)

Edit for zzzzBov's comment...

From the JQuery KeyPress documentation:

To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.

edited Aug 7, 2013 at 22:09

answered Aug 7, 2013 at 22:04

David

34.6k3 gold badges65 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zzzzBov Over a year ago

event.which is probably a better choice

denov · Accepted Answer · 2013-08-07 22:24:02Z

1

you need to use window.onkeydown and then check for the keys you're interested in.

https://developer.mozilla.org/en-US/docs/Web/API/window.onkeydown

edited Aug 7, 2013 at 22:24

answered Aug 7, 2013 at 22:05

denov

12.9k2 gold badges32 silver badges45 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:05:17Z

0

You should listen on key press event.

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    alert("Character typed: " + String.fromCharCode(charCode));
};

For more info Look here Link

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 7, 2013 at 22:08

Susie

5,17811 gold badges56 silver badges74 bronze badges

Comments

twinlakes · Accepted Answer · 2013-08-07 22:08:01Z

0

You need to add an event listener to the window. Then in the event handler, you get the keyCode property from the passed-in event. KeyCodes are semi-arbitrary in that they don't directly map to what you might think, so you have to use a table (first result on google: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) to identify the keycodes you care about.

window.addEventListener('keypress',function (evt) {
   switch (evt.keyCode) {
       case 48:
           zeroKeyPressed(); break;
       case 49:
           oneKeyPressed(); break;
       ...
   }
}, false);

answered Aug 7, 2013 at 22:08

twinlakes

10.4k8 gold badges36 silver badges46 bronze badges

Comments

Joe Simmons · Accepted Answer · 2013-08-07 22:08:37Z

0

You would use a key press event.

Here's an example for your usage:

window.addEventListener('keypress', function (event) {

    var key_code, key;

    event = event || window.event; // IE

    key_code = event.charCode || event.keyCode || event.which || 0;
    key = String.fromCharCode(key_code);

    // prevent keys 0-9 from doing what they normally would do
    if (key_code >= 48 && <= 57) {
        event.preventDefault();
        alert('The user pressed ' + key);
    }

}, false);

answered Aug 7, 2013 at 22:08

Joe Simmons

1,8582 gold badges12 silver badges9 bronze badges

Comments

Sterling Diaz · Accepted Answer · 2019-01-30 15:49:36Z

0

Using plain js, you can use this in your layout.htmlcs, at the beginning:

  @{

        <script>
            sessionStorage.setItem("ProductionHostURL", '@System.Configuration.ConfigurationManager.AppSettings["ProductionHostURL"]');
        </script>

}
<!DOCTYPE html>

Then in your main js file of the layout.htmlcs, you can use this a method liked this:

var urlBaseProduction;
var urlBaseDevelopment;

    $(document).ready(function () {
      configureHostEnvironment()
     ....
    }

In that method, configure the variables to use in production and development, like this:

function configureHostEnvironment(){

    HOST = sessionStorage.getItem("ProductionHostURL")
    if (HOST.length <= 0) {
        alert("Host not configured correctly")
    } else {
        urlBaseProduction= host + '/api/';
        urlBaseDevelopment= host + port + '/api/';
    }
}

If you have a suggestion or improvement to this method, please comment.

answered Jan 30, 2019 at 15:49

Sterling Diaz

3,8832 gold badges34 silver badges35 bronze badges

1 Comment

Paul Roub Over a year ago

Please don't post identical answers (1, 2, 3) to multiple questions. Post one good answer, then vote/flag to close the other questions as duplicates. If the question is not a duplicate, tailor your answers to the question.

Collectives™ on Stack Overflow

How do I get key values in HTML/Javascript

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related