How to disable the function of ESC key in JavaScript?

Question

In my chat application there are some text fields which gets the user login details.

When filling the user details, if a user suddenly pressed the ESC key, the data will be lost.

If need to disable the function of ESC key, which event I need to use? How can I do that.

My JavaScript code is:

function esc(e){
    e = e || window.event || {};
    var charCode = e.charCode || e.keyCode || e.which;
    if(charCode == 27){
    return false;
    }
}

I searched a lot in Stack Overflow and Google; nothing worked. Please, can anyone help me to do that?

the escape key does nothing special per default. What do you meen by the data will be lost? You could use a keydown eventlistener to react accordingly. — Christoph, Jan 30 '13 at 10:23
Thanks for your reply.Data lost means that,the entered text in the text fields are lost. — Human Being, Jan 30 '13 at 10:25
I need that ESC will not work in my application . How to do this ? — Human Being, Jan 30 '13 at 10:26
Can you create a JsFiddle or give us a link to show what you mean? — user1636130, Jan 30 '13 at 10:30

score 7 · Answer 1 · answered Jan 30 '13 at 10:29

7

You can bind an eventlistener to your input field to catch the Event when Esc is pressed and supress it.

document.querySelector("input").addEventListener("keydown",function(e){
    var charCode = e.charCode || e.keyCode || e.which;
    if (charCode == 27){
         alert("Escape is not allowed!");
        return false;
    }
});

Example

answered Jan 30 '13 at 10:29

Christoph

50,121
21
99
128

Thanks for your reply... nothing happened .any more ideas ? – Human Being Jan 30 '13 at 10:39
What exactly do you mean by nothing happens? This code [works perfectly](http://jsfiddle.net/JEhjG/). Did you include this script AFTER your input element? Take a look at the webdeveloper console (press F12) an look for errors. – Christoph Feb 01 '13 at 10:34
Thank for your reply...Works in Fiddle but not working in my browser. – Human Being Feb 01 '13 at 11:26
@Anand assuming your answer, you are using Internet Explorer. Be aware however, that your code will break in all other browsers! – Christoph Feb 01 '13 at 11:28
See the solution which I gave.It works in all browsers.I will debug why your code is not working for me.Any way thanks for your support Mr.Christoph. – Human Being Feb 01 '13 at 11:32
Also see my new question in [My new question](http://stackoverflow.com/questions/14645011/window-onbeforeunload-and-window-onunload-is-not-working-in-firefox-safari-o).Help me if possible. – Human Being Feb 01 '13 at 11:34
This does not work in full screen mode, it doesn't prevent user to exit full screen... – Gibberish Apr 19 '21 at 08:45
Thanks, it led me to right direction. However, all three are deprecated. From [MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode) `Warning: Do not use this property, as it is deprecated. Instead, get the Unicode value of the character using the key property.` – yokus Jul 17 '23 at 10:18

Human Being · Accepted Answer · 2013-12-30T13:31:07.143

I got the solution to control the " F5 , Esc , BackSpace(BS) " keys with the following code.

My Java Script code will be ,

document.attachEvent("onkeydown", win_onkeydown_handler);

function win_onkeydown_handler() {
    switch (event.keyCode) {

    case 116 : // 'F5'
         event.returnValue = false;
         event.keyCode = 0;
         break;  

    case 27: // 'Esc'
        event.returnValue = false;
        event.keyCode = 0;
        break;

    case 08: // 'BackSpace'
        if (event.srcElement.tagName == "INPUT"
                || event.srcElement.tagName == "TEXTAREA") {
        } else {
            event.returnValue = false;
            event.keyCode = 0;
        }
        break;

    }
}

Thanks who are all supported me to do this and for your suggestions.

you should **NOT** use this code! This only works in Internet Explorer and will fail in all other browsers. The correct way to bind a eventhandler is via `addEventListener` and never via `attachEvent`! — Christoph, Feb 01 '13 at 11:13

score 1 · Answer 3 · answered Jan 30 '13 at 10:40

1

I have used this for a login popup code:

jQuery(document).keyup(function(e){
    if(e.keyCode==27 && popupStatus==1){
    // alert('not allowed !!!');
        // or any other code
     return false;
    }
});

answered Jan 30 '13 at 10:40

Riju Mahna

6,718
12
52
91

1

I guess 'keydown' does not work in Chrome. Better to use 'keyup' instead – Riju Mahna Jan 30 '13 at 10:42
Thanks for your support.I dont have knowlede in JQuery.can u please convert it in to JS. – Human Being Jan 30 '13 at 10:43
2

Buddy, this is probably the simplest 2-line code you may get. Why not start with jQyery today !! :) – Riju Mahna Jan 30 '13 at 10:54
@Riju You are guessing wrong! How do you come to this assumption? – Christoph Feb 01 '13 at 10:35
@Christoph .. No offence... Its just my humble opinion. – Riju Mahna Feb 01 '13 at 10:43
@Riju It's not about opinions, it's about facts, and these are either true or false. And I would consider your statement. http://jsfiddle.net/JEhjG/ – Christoph Feb 01 '13 at 10:47
@Christoph .. I never questioned your code. all I said that the code that I gave was simpler and smaller. And what harm will the guy get if he learns jQuery ? After all, libraries like these have been developed out of a necessity when plain javascript fails to provide simple solutions, OR a solution at all, for that matter. Again no offense buddy.. :) – Riju Mahna Feb 01 '13 at 11:00
@Riju I feel offended in no way. I am just refering to your: "I guess 'keydown' does not work in Chrome." which is plain wrong. I was not questioning your recommendation of jQuery;) – Christoph Feb 01 '13 at 11:10
@Christoph.. It was a guess ('I guess'.. ) so its allowed to be wrong ;) – Riju Mahna Feb 01 '13 at 11:13

score 0 · Answer 4 · answered Jan 30 '13 at 10:28

I have done something similar using jquery to limit entry to numbers

    $(inputBox).keydown(function(event) {
        // Allow only backspace and delete
        var allowed_keys = [
            46, // delete
            8, // backspace
                 ];
        if ($.inArray(event.keyCode, allowed_keys) != -1) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });

How to disable the function of ESC key in JavaScript?

4 Answers4

Linked