Why is onclick for the first button in a form triggered when I hit ENTER key? I am trying to figure out why onclick was triggered by the ENTER key, and then have the function go ahead if it was an actual mouse/tap button click, or have the function ignore the key press if it was the ENTER key.

I tried checking the event.keyCode (passed into javascript function), but it is undefined.

In fact the only property that seems to be set is event.isTrusted but no other properties exist.

EDIT: Created new demo code to better explain the issue I am having...

Here is js fiddle with the issue: /

When you put the cursor in the Quantity 2 input box (the second box) and you click enter, it fires the onclick event for the first LESS button in front of the Quantity 1 input box.

There is no keyCode property passed in with event to identify whether onclick was actually triggered by clicking with a mouse or triggered by ENTER key.

My original test code HTML is:

<form onsubmit="return false;">
  Quantity 1: <button id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br>
  Quantity 2: <button id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

And my original javascript to go with it is:

function b1Less(_id, _event) {
  alert(_event.keyCode);
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}
function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}
function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

Why is onclick for the first button in a form triggered when I hit ENTER key? I am trying to figure out why onclick was triggered by the ENTER key, and then have the function go ahead if it was an actual mouse/tap button click, or have the function ignore the key press if it was the ENTER key.

I tried checking the event.keyCode (passed into javascript function), but it is undefined.

In fact the only property that seems to be set is event.isTrusted but no other properties exist.

EDIT: Created new demo code to better explain the issue I am having...

Here is js fiddle with the issue: https://jsfiddle/Ld142qx3/24/

When you put the cursor in the Quantity 2 input box (the second box) and you click enter, it fires the onclick event for the first LESS button in front of the Quantity 1 input box.

There is no keyCode property passed in with event to identify whether onclick was actually triggered by clicking with a mouse or triggered by ENTER key.

My original test code HTML is:

<form onsubmit="return false;">
  Quantity 1: <button id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br>
  Quantity 2: <button id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

And my original javascript to go with it is:

function b1Less(_id, _event) {
  alert(_event.keyCode);
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}
function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}
function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

• javascript
• html

• Why do you expect keyCode to be defined on a click event? try adding onkeyup="doClickMeButton(event, this.id)" to your input and you will see keyCode values... – Nick Commented Jun 2, 2020 at 4:14
• @jsherk I have uploaded the answer you can check, just curious why the click me button is present what functionality are you trying to achieve – Aditya toke Commented Jun 2, 2020 at 4:31
• @Adityatoke I just re-created new demo code that better shows the problem I am having. I removed the CLICK ME button. – jsherk Commented Jun 2, 2020 at 16:00
• @Nick The ENTER key causes onclick to fire but there is no keyCode property to determine whether it was fired by mouse click or ENTER key. I have created new demo code to better show the issue. – jsherk Commented Jun 2, 2020 at 16:01
• Feels like a dirty hack but it is default behavior in browsers... Shocking truly – Juribiyan Commented May 26, 2023 at 18:57

2 Answers 2

Your problem is that the type of a button inside a form defaults to a "submit" button (see the spec), and when a form is implicitly submitted (which happens when you press ENTER in an input field, the first "submit" button in the form also has its onclick event handler triggered (see the spec). Changing your buttons to have type="button" resolves the issue:

function b1Less(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}

function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

<form onsubmit="return false;">
  Quantity 1: <button type="button" id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button type="button" id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br> Quantity 2: <button type="button" id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button type="button" id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

As checked doClickMeButton function event is a mouse event and mouse event doesn't have keyboard binding details.
You can bind a keyboard-based events on an input tag. I have mentioned the code below which behaves the same as you wanted.

function doClickMeButton() {
  alert("I am called");
}

function doMoreLess(_id) {
  alert("clicked on " + _id);
  return false;
}

function myFunction(event) {
  var x = event.which || event.keyCode;
  if (x === 13) {
    console.log(event.which, "which"), console.log(event.keyCode, "keycode");
    doClickMeButton();
  }
}

 <form>
 
         // first thing I dont know why you need this button
        <button id="my-button"
       
        onclick="">CLICK ME</button>
      
        <br>
        Enter something in the input textbox below, and hit the ENTER key and notice that:<br>
        &nbsp;&nbsp;(1) keyCode is undefined, and<br>
        &nbsp;&nbsp;(2) ENTER fires the onclick action of the first element with an onclick in it.
        <br>
      
        <button id="less" onclick="return doMoreLess(this.id);">
        less
        </button>
        <input type="text" size="10"  onkeypress="myFunction(event)">
        <button id="more" onclick="return doMoreLess(this.id);">
        more
        </button>
      </form>