keydown event for form or div in html

Question

I am displaying a form inside a div tag as a dialog to enter details. In this form, I want to handle the ESC key using jQuery. If any input tags have focus, keydown event will trigger. If the focus is on the form but not on any input tags then it will not trigger keydown event.

Here is my code:

$("#NewTicket").keydown(function(e) {

    var unicode = e.keyCode ? e.keyCode : e.charCode

    if (unicode == 27)

    {

        if (confirm("Are you sure you want to cancel?"))

            return true

        else

            return false

    }

});

Form doesn't have focus, and won't trigger any keys, try $(document).keydown(); — , Jul 15 '11 at 08:37
`var unicode=e.keyCode? e.keyCode : e.charCode` is not necessary. jQuery normalizes whaever value contains the keycode into `e.which` which you should use. — ThiefMaster, Jul 15 '11 at 08:38

score 0 · Answer 1 · answered Sep 25 '12 at 15:42

I believe that if you put your form in an element made focusable using tabIndex, like , or this focusable div is the container element inside the form, then you can bind the keyDown to this div instead. It works cross browser as far as I've tested but I've not seen this solution discussed much, so curious as to anyone's comments about this.

score 0 · Answer 2 · answered Apr 01 '20 at 06:41

I know this is an old question but someone still might be looking for an answer.

Usually, I do capture key down at global level then forward it to a function and handle it there. For your needs, you can get nodeName. (Tested in FF, Chrome)

$(document).keydown((e)=>{//Capture Key
    if(["INPUT","TEXTAREA"].indexOf(e.target.nodeName)!==-1){//If input in focus
      console.log("INPUT FOCUSED",e.code,e.keyCode);
      if(e.keyCode==27 || e.code=="Escape"){//Capture Escape key        
        console.log('ESC');
      }
    }
});

score 0 · Answer 3 · answered Jul 15 '11 at 08:38

0

Just add an id,class to the form

<form id="form">
....

and now do this :

$("#NewTicket,#form").keydown(function(e)

{

    var unicode=e.keyCode? e.keyCode : e.charCode

    if(unicode == 27)

    {

            if (confirm("Are you sure you want to cancel?")) 

                    return true

            else

                    return false

    }
)};

This should work

answered Jul 15 '11 at 08:38

kritya

3,312
7
43
60

No it will not work. If focus in on input tags it will work but if focus is on form but not in input tags then it will not work. – Royal Pinto Jul 15 '11 at 09:06

zatatatata · Answer 4 · 2011-07-15T11:01:37.830

0

You can't focus on forms. If you wan't to handle keydown on elements that don't get focus (such as divs or forms) you have to bind it to the document.

Turns out that jQuery automatically adds :focus selector which enables you to find the focused element by using $(':focus')

edited Jul 15 '11 at 11:01

answered Jul 15 '11 at 08:51

zatatatata

4,761
1
20
41

Ok. Now i have an idea. If any input tags lost focus then i will try to test any input tags has focus. If not then it means input tags has no focus. So after checking i will set focus first input tag of Form so that if user clicks on form it will focus to first input tag. – Royal Pinto Jul 15 '11 at 09:15
How can i check whether focus is on input tag or not.? – Royal Pinto Jul 15 '11 at 09:16
You can't directly check which element has focus at the moment. What you can do is add focus and blur events to the form elements and then keep track which element loses focus and which element gains it. – zatatatata Jul 15 '11 at 09:19
Actually, having only focus events should suffice since it's impossible to have two elements focused at the same time anyways. – zatatatata Jul 15 '11 at 09:21
No. what i meant is I should not allow to lost focus of input tags. At least one input tag should be focus. If i click on black area of form it should focus to first input tag. – Royal Pinto Jul 15 '11 at 09:24
Oh, in this case, what I'd do is add on blur and focus events to all form elements and when blur fires (you should test which fires first, blur or focus, I think, blur should be first) assign a timeout of 1ms and if focus fires, you disable the timeout. If the focus doesn't fire, the timeout does and that would then focus on the element of your choice. – zatatatata Jul 15 '11 at 09:32
Seems there actually is a way after all http://stackoverflow.com/questions/497094/how-do-i-find-out-which-javascript-element-has-focus But it only seems to be supported by newer browsers. – zatatatata Jul 15 '11 at 09:36
What i was thinking is $('#title').focusout(function(){}); i will add same method for all input tags. and inside this method i will check(check for all input tags)) any input tag has foucs or not. If yes no action, If not i will set focus to first element. Will it work – Royal Pinto Jul 15 '11 at 09:39
You can't check if an element has focus in a way that it would work on older browsers too (not talking about IE6). You have to check both blur(focusout in jquery-speak) and focus events to make sure if something was selected when something else was focused out of. Probably the only way is what I described above. Technically, you could use ranges and selections, but that is even more less cross-browser. – zatatatata Jul 15 '11 at 09:47

keydown event for form or div in html

4 Answers4