javascript - How to disable form submission when enter is pressed on input field - Stack Overflow

admin管理员组

文章数量:1399119

UPDATE: I am constructing the form via Javascript, so the form is not there on page load.

I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.

$("#input").keydown(function (e) {
    if (e.keyCode == 13) {
        alert("enter pressed");
        return false;
    }
});

However this does not work, there is no alert and the form still gets sent. How do I solve this?

UPDATE: I am constructing the form via Javascript, so the form is not there on page load.

I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.

$("#input").keydown(function (e) {
    if (e.keyCode == 13) {
        alert("enter pressed");
        return false;
    }
});

However this does not work, there is no alert and the form still gets sent. How do I solve this?

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited May 11, 2017 at 15:06 asked May 10, 2017 at 21:26 user7933742user7933742 5

• I think you are referring to the submit event – funcoding Commented May 10, 2017 at 21:29
• @funcoding yes exactly – user7933742 Commented May 10, 2017 at 21:35
• So change your code to use submit instead of keydown event – funcoding Commented May 10, 2017 at 21:36
• hitting enter to submit a form, when inside of a text input, is expected behavior for many users. As standard text inputs don't allow for character returns, I'd ask why someone is hitting enter when in one of these inputs to begin with? – scottohara Commented May 11, 2017 at 4:00
• @scottohara right they shouldn't but I want to write a function to prevent this – user7933742 Commented May 11, 2017 at 14:35

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Use preventDefault() to prevent the form from submitting.

$("#input").keydown(function (e) {
  if (e.keyCode == 13) {
    alert("enter pressed");
    e.preventDefault();
  }
});

Example with a form:

$('form').submit(function(e){
  e.preventDefault();
});

https://jsfiddle/aya6ockv/

Use onkeypress attribute in your input as follows:

<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
    var x = event.which || event.keyCode;
    if(x == 13) {
        alert("enter pressed");
        return false;
    }
}
</script>

I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.

$("form").bind("keypress", function(e) {
   if (e.keyCode == 13) {
     return false;
   }
});

Just created a JSFiddle that shows that it works. Check it out

$('#input').keydown(function (e) {
  if (e.keyCode == 13) {
    alert('alert pressed');
    return false;
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <input text="name" id="input">
  <button type="submit">Submit</button>
</form>

return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false

$("#input").keydown(function (e) {
    if (e.which == 13) {
        alert("enter pressed");
        return false;
    }
});

本文标签： javascriptHow to disable form submission when enter is pressed on input fieldStack Overflow