How to create a shortcut inside a page?

3

To add a new item to my database there is the Add button, however I would like to add a shortcut to it that performs the same function as the button. For example, when E is clicked on any question in the OS, it goes into edit mode.

In my case I thought of something like Shift + N to insert a new item.

By using keydown you can detect that only one key was pressed, as shown in the example below:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {   
      alert("O código "+ e.which + " que representa o Shift foi precionado");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To create the shortcut I thought something like:

if (e.keyCode == 16 && e.keyCode == 78) 

In this case, the 78 corresponds to n , but it did not work this way.

How could I create a shortcut on my web page that would recognize the command shift + n ?

    
asked by anonymous 22.01.2017 / 15:34

2 answers

4

The object evento brings the read-only properties shiftKey , a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey"> ctrlKey , metaKey (Mac command key or Windows key), which can be true or false .

You can build something like this:

$(document).keydown(function (e) {
    if (e.keyCode == 78 && e.shiftKey) {   
      alert("shift+n");
    }
});

The function passed to the keydown is invoked every time a key is pressed: if I press SHIFT , it will trigger the event, and even with the key pressed , if I type the N , it will fire the event again (second time). But there is that property that says SHIFT is pressed.

So if you check with if (e.keyCode == 16 && e.keyCode == 78) , it will not result in true because the event is triggered twice:

  • When SHIFT is pressed, the event is triggered for the first time with keyCode 16 and shiftKey : true (why is the shift that was pressed) li>
  • When N is pressed, event fired a second time with keyCode 78 and shiftKey : true .
  • Finally, the documentation says that if I keep pressing a key, it will invoke the function every time the operating system repeats it. For example, if you press and hold the A key, it will invoke .keyDown once, wait a bit, and then invoke it several times in the sequence, as if user repeatedly has to press the key, because the operating system repeats it (as in any editor if we hold a key for a while: it will be repeated several times).

    But the same behavior does not happen with some special keys, including SHIFT . The operating system does not repeat it when you press and hold it.

    I created a fiddle that monitors the keydown and adds a row in the table to each keystroke for testing: link

    p>     
    22.01.2017 / 15:45
    3

    The object event brings information like:

    • event.ctrlKey
    • event.altKey
    • event.metaKey
    • event.shiftKey

    Try:

    $(document).bind('keypress', function(event) {
    
            if( event.which === 78 && event.shiftKey ) {
                alert('pressione SHIFT+N');
            }
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
    22.01.2017 / 15:45