Handling Key-Press Events (F1-F12) Using JavaScript and Jquery, Cross-Browser

Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

The best source I have for this kind of question is this page: http://www.quirksmode.org/js/keys.html

What they say is that the key codes are odd on Safari, and consistent everywhere else (except that there's no keypress event on IE, but I believe keydown works).

How do I override function keys in web browsers?

This JS library catches the F12 key in Chrome without opening DevTools and captures the F7 event in Firefox. It doesn't stop the caret browsing question from popping up, but it does trigger a JS event that you can attach to. There may not be a way to stop FF from putting the popup up, but it still triggered the JS event regardless.

http://www.openjs.com/scripts/events/keyboard_shortcuts/

I found the library from this question:
Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

Overriding the F1 key in FF, chrome, ie. Is F1 on ie8/chrome on keyup and in FF on keypress? What about tab in an input field?

Good luck. Mapping of special keys in browsers is a mess. In particular, IE certainly does not fire keypress events for function keys at all. onkeydown/up may work on IE, though. Many keys are handled incorrectly, in different ways by different browsers. I strongly doubt there is a cross-browser method of handling F1. Sorry; I know that's not the answer you wanted, but I believe it's the truth.

Do read the linked article, particularly the occasional warnings about "When I discovered that I decided not to risk my sanity by performing further punctuation character experiments." and the like. :)

How can I block F12 keyboard key in jquery for all my pages and elements?

Here 123 is the keyCode of F12 which opens the Inspect Element screen in the browser. Adding a keydown event than only does return false for 123 will block the Inspect Element screen.

$(document).keydown(function (event) {
    if (event.keyCode == 123) { // Prevent F12
        return false;
    } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I        
        return false;
    }
});

Prevent Right Click > Inspect Element

$(document).on("contextmenu", function (e) {        
    e.preventDefault();
});

Demo

How do I simulate a cross browser key press that works for alphanumeric and non-printable characters in JavaScript?

This solution fills all of the criteria:

1. This example works in modern versions of chrome and firefox (https://caniuse.com/dispatchevent) (https://caniuse.com/keyboardevent-key)
2. This example does not include anything deprecated
3. N/A
4. Alphanumeric characters are supported
5. This is possible with this solution
6. You can set key equal to one of these values https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values (I would embed this, however, there are a lot of codes)

• Ctrl: Use the ctrlKey option (boolean)
• Alt: Use the altKey option (boolean)
• Shift: Use the shiftKey option (boolean)
• Meta Key/Command Key: use the metaKey option (boolean)

function simulateKeypress(target, options) {
  target.dispatchEvent(new KeyboardEvent('keydown', options));
}

document.addEventListener("keydown", event => {
  console.log(event.key);
});

 
setTimeout(() => {

  simulateKeypress(document, {
    key: "F1"
  });
}, 1000);

crossbrowser keypress for special keys (arrows,...) in javascript

I ended up using keycode.js, but am building a whole event-managing system around keydown, keypress and keyup events, because just one of the events (keydown) is not enough to determine which character was entered and which key was pressed if there is no corresponding character. Browser incompatibilities are an added bonus to this challenge. :)

Thank you both for your answers, it has helped me understand the problem fully.

Detecting ctrl+f6 from javascript

Hope this helps (source)

$(window).keydown(function(event) {  if(event.ctrlKey && event.keyCode == 117 ) { //f6 keycode    console.log("Hey! Ctrl + F6 event captured!");    event.preventDefault();   }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Hit Ctrl + F6 to see console log on this event.

---

Related Topics