Detect Enter Key in Javascript with no Input fields

Question

I am creating a custom notification popup, and I am trying to detect an Enter key in Javascript on a form that has no input fields.

I have tried adding "onkeypress" to my tag but this didn't work.

Any ideas?

If a form has no input field, it is not focusable: so you will need to bind the keypress event to the window object. — Terry
– Terry, Commented Nov 25, 2020 at 16:04
Adding the code that you wrote to the question will let us know for sure if it's the case that @Terry described. — Emiel Zuurbier
– Emiel Zuurbier, Commented Nov 25, 2020 at 16:07
This worked, but the problem is that I need to detect it only in the modal window that displays the custom notification. The Modal Window is not using an iframe. — RickInWestPalmBeach
– RickInWestPalmBeach, Commented Nov 25, 2020 at 16:11
I have tried all these suggestions, except adding it to the html tag which wouldn't work for a modal popup, and nothing is working yet. — RickInWestPalmBeach
– RickInWestPalmBeach, Commented Nov 25, 2020 at 16:19

mplungjan · Accepted Answer · 2020-11-25 17:24:37Z

2

Like this

e.which is 13 on enter and e.target tells you where that happened

e.code is "Enter" but is less supported

window.addEventListener("keypress",function(e) { 
  console.log(e.target.tagName,e.which === 13) 
})

<form>
<input type="button">
</form>

Only on the form

document.getElementById("myForm").addEventListener("keypress",function(e) { 
  console.log(e.target.tagName,e.which === 13) 
})

<form id="myForm">
<input type="button">
</form>

In a div:

document.getElementById("popup").addEventListener("keypress", function(e) {
  console.log(e.target.tagName, e.target.closest("div").id, e.which === 13)
})

#popup {
  text-align: center;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  border:1px solid black;
  padding:20px;
}

<div id="popup">
  <form id="myForm">
    <input type="button">
  </form>
</div>

edited Nov 25, 2020 at 17:24

answered Nov 25, 2020 at 16:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2020-11-25 17:21:32Z

1

document
  .querySelector("#my_form")
  .addEventListener("keypress", function(e) {
    console.log(e.target.tagName);
    if (e.code === "Enter") {
      console.log("hiii");
    }
  });

<form id="my_form" style="border: 1px solid red; outline: 0" tabindex="0">
  <label>....</label>
</form>

edited Nov 25, 2020 at 17:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 25, 2020 at 16:10

Aya Mostafa

345 bronze badges

1 Comment

mplungjan Over a year ago

Some explanation is good. I also made you a snippet - Please note that IE does not support .code

RickInWestPalmBeach · Accepted Answer · 2020-11-25 16:45:45Z

0

Thank you for all the responses. I am quite sure, under normal circumstances, they would have worked. However, since my modal (which needed to detect a keypress) was display over a form (which also had a keypress), I had to add a modal status (visible/hidden) and edit the keypress of my main form based on the modal status.

function handleKeyPress(e)
{
    var key=e.keyCode || e.which;

    var modalstatus = $("#modalstatus").val();

    if (key==13)
    {
        if (modalstatus == "hidden")
            Event_On_Main_Page();
        else
            Modal_Event();
    }
}

answered Nov 25, 2020 at 16:45

RickInWestPalmBeach

5687 silver badges24 bronze badges

Collectives™ on Stack Overflow

Detect Enter Key in Javascript with no Input fields

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related