Javascript guide - change onclick to onkeypress-- how can I use the space key for both functions. To close the nav and open

keypress event
jquery keypress
long key press event in javascript
keypress value

Just started learning HTML/css/javascript within the last 4 days.

I'm having an issue with my page. Right now I have the onlick function on my page on previous user button.

How can I change from onclick button to onkeypress?

Hoping the page can slide on a specific key command instead of a click.

        function openNav() {
            document.getElementById("users").style.width = "100%";

        function closeNav() {
            document.getElementById("users").style.width = "0%";

    <div id="users" class="loggedusers">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="#">Previous logged Users</a> 
        <div id="previoususer">
            <span style="font-size:35px;cursor:pointer;" onclick="openNav()">&rArr; Previous Users</span>

You can use the keypress event for this:


const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keypress', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
  if(e.code == 'ArrowLeft') {
    //Slide to the left
  if(e.code == 'ArrowRight') {
    //Slide to the right

With e.code you can query the pressed key. Examples:


JavaScript, To trigger a click button on ENTER key, We can use any of the The method either triggers the keypress event or to run a function when a� How to detect input-text pressed key on javascript. change onclick to onkeypress— how can I use the space key for both functions. To close the nav and open.

If you want your whole page to react on a keypress-event instead just a input field, you can use this:

    document.onkeypress =  keyPressFunction;
    function keyPressFunction(e){
        // here comes your keypress-code
        var charCode = (typeof e.which == "number") ? e.which : e.keyCode

Making actions keyboard accessible by using keyboard event , Because we are using an anchor element, the control is focusable and the browser will would still be keyboard accessible without the key event handler for SPACE. //end switch return true; } </script> <a role="button" href="#" onclick ="return Open Ajax Alliance Example 3 - Button role example using text-only buttons,� To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery.. keyup():. This event occurs when a keyboard key is released. . The method either triggers the keyup event, or to run a function when a keyup event occ

KeyboardEvent keyCode Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don't produce a character value are modifier keys such as Alt , Shift , Ctrl , or Meta .

You need to use keypress event on window and call the function inside if statements when user press specific key.

   function openNav() {
        document.getElementById("users").style.width = "100%";

    function closeNav() {
        document.getElementById("users").style.width = "0%";

    window.addEventListener("keydown", function(e) {
        if(e.keyCode === 38) { 
            closeNav(); // this function will be executed when user press Arrow Up key 
        }else if(e.keyCode === 40) {
            openNav(); // this function will be executed when user press Arrow Down key

Here, window.addEventListener execute the function which is inside of it when user presses a key. And if statements will call the closeNav() function if Arrow Up is pressed and will call openNav() function if Arrow Down is pressed. if other keys are pressed if statements will not run.

Introduction to browser events, keydown and keyup – when a keyboard key is pressed and released. To react on events we can assign a handler – a function that runs in case of an event Please note that inside onclick we use single quotes, because the We'd like to assign two event handlers for that. Open a sandbox for the task. To find out if the user is pressing a function key (e.g. "F1", "CAPS LOCK" or "Home") use the onkeydown or onkeyup event. Note: In Firefox, the keyCode property does not work on the onkeypress event (will only return 0). For a cross-browser solution, use the which property together with keyCode, e.g:

Keyboard Events

In javascript we have three keyboard event

  1. keydown
  2. keypress
  3. keyup

triggered exactly in this order.

in my opinion the best way to work with keyboard navigation is to use the "keydown" event as in the Sandesh's example.

Handling events

To handle these events you have 3 way: (examples for "keydown")

1. in markup

<element onkeydown="myScript">

2. javascript element.onkeydown

object.onkeydown = function(){myScript};

3. javascript element.addEventListener

object.addEventListener("keydown", myScript);

Due to security issue the best way is to use the third. (you can get more information googling 'XSS' or 'cross site scripting') Infact to prevent XSS in your site you need to add some http headers that block inline scripts (CSP).

furthermore you can pass true to the third parameter of addEventListener method to capture the event before being dispatched to any EventTarget beneath it in the DOM tree and then you can stop propagation if the key code matches the reserved one. It depends on the user experience that you want to implement.


Try this site to get keycodes:

in my opinion, for your case the best way is to use event.code.


MDN - keypress

MDN - addEventListener

Keyboard: keydown and keyup, Keyboard events should be used when we want to handle keyboard actions ( virtual keyboard also counts). For instance, to react on arrow keys� attribute changes, ex: attrmodified-open; Here’s a simple example of monitoring click events coming from any widget. Note that since dijit widgets leverage dijit/_OnDijitClickMixin, keyboard “click” events (i.e using the space or enter key) are also emitted as DOMNode click events.

HTML for Beginners: Learn To Code HTML Today , In this guide we cover the basics in a (hopefully) easy-to-understand manner, In CSS, JavaScript, and other languages, the class of an element is notated with Some people prefer to put the opening and closing tags on individual lines. main navigation menu here --> </div> <div class="search-bar"> <! If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it. Otherwise, i.e., pressed key inputs a unicode character: If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with the following additional rules .

Keyboard Accessibility Tips Using HTML and CSS, Here are some keyboard accessibility tips you can quickly implement using These tips are part of Web Accessibility: the Complete Learning Guide, where we' ve this case) often use special hardware mimicking keyboard functionality. it with the Tab key, then move the slider up and down with Space. Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

All the Electron Docs!, On Linux and Windows, the Command key does not have any effect so use Make sure to listen for the open-file event very early in your application startup to However, you can change the file during build time via Electron Forge, Electron exposes full access to Node.js both in the main and the renderer process. onblur - When a user leaves an input field onchange - When a user changes the content of an input field onchange - When a user selects a dropdown value onfocus - When an input field gets focus onselect - When input text is selected onsubmit - When a user clicks the submit button onreset - When a user clicks the reset button onkeydown - When a user is pressing/holding down a key onkeypress

  • welcome to, first, there is 3 types of keyboard events: onkeypress, onkeyup,onkeydown and for handling events see:
  • I can't use the same keys to open and close ?