2

I've got a button with the onClick-event and a textfield with onKeyDown-event.

Button: onclick="myFunc(3)"
Textfield: onKeyDown="if(event.keyCode==13) myFunc(3);"

Somehow the button is getting called if I press the enter-key and I don't know why.

Mihawk
  • 815
  • 3
  • 14
  • 31
  • 1
    We'd need a **lot** more information to work with to be able to usefully answer this question. – T.J. Crowder Oct 16 '15 at 09:28
  • Please post your relevant HTML. In particular, is the button a submit button? Also, how do you know a button click is being triggered, since you are calling the same function in both cases? – Amadan Oct 16 '15 at 09:29

2 Answers2

7

When you press Enter in a text field, you trigger a form submission and browsers simulate clicking on the first submit button of the form.

You can avoid this by preventing the default action of the keypress (not keydown) event.

var s = document.querySelector('[type=submit]');
var t = document.querySelector('[type=text]');
var f = document.querySelector('form');

t.addEventListener('keydown', function(event) {
  if (event.keyCode == 13) {
    alert("enter pressed")
  }
});

t.addEventListener('keypress', function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
  }
});
<form action="/">
  <input type="text">
  <input type="submit">
</form>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • That was my *other* theory, but given that the question lacked any information about a form or that the button was a submit... – T.J. Crowder Oct 16 '15 at 09:37
0

You will come across this situation if you have a <button> element inside your form(if the purpose of the button is to not to submit the form) without specifying the type as type="button". Please refer to this discussion for more information.

mwNad
  • 1
  • 2