I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).

I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.

I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).

I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.

• javascript
• jquery
• html

• I don't see what code I could provide you with. It's just a normal form in which one of the inputs is supposed to work as a search and filter function. I want that input to do the search instead of doing the form submit. – Bogdan Commented Mar 27, 2012 at 8:10
• Yeah but suprisely most of the people do error's on the easiest tasks. – mas-designs Commented Mar 27, 2012 at 8:13
• yes like using a possesive form instead of a plural :D. sorry, had to do it. – Bogdan Commented Mar 27, 2012 at 8:52

4 Answers 4

How to get whether the Enter is pressed?

$('input.the-one-text-input').keydown(function(e) {
  if(e.keyCode == 13) { // enter key was pressed
    // run own code
    return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
  }
});

Also note this ment on that page:

** If anyone has reached this from Google (like I did), know that "keyup" instead of "keypress" works in Firefox, IE, and Chrome. "keypress" apparently only works in Firefox.

Which isn't 100% correct anymore, since it also works works in Chrome. However it wouldn't surprise me if it still doesn't work in IE.

http://jsfiddle/yzfm9/9/

Basically check which input is focused and do custom stuff depending on it

HTML

<form id="nya">
    username <input type="text" id="input_username" /><br/>
    email <input type="text" id="input_email" /><br/>
    hobby <input type="text" id="input_hobby" /><br/>
    <input type="submit" />
</form>

JS

$('#nya').submit(function() {
    var focusedId = ($("*:focus").attr("id"));
    if(focusedId == 'input_email') {
       // do your custom stuff here

       return false;
    }
});

Returning false when enter is pressed on "onkeydown" will disable the default behaviour. Then you can just call your function on the "onkeyup" event.

<input type="text" 
       onkeyup="myFunction()" 
       onkeydown="return event.keyCode != 13;"/>

Just had a play with jQuery's .keypress() method and it looks like it does the job.

HTML

<form method="post" action="">
    <input type="text" name="submit1" id="submit1" />
    <input type="text" name="noSubmit1" id="noSubmit1" />
    <input type="text" name="submit2" id="submit2" />
    <input type="submit" />
</form>​

JQuery

​$('#noSubmit1​​​​​​​​​​​​​​​').keypress(function(event) {
    if (event.which == 13 ) {
        event.preventDefault();
    }
});​​

It basically adds a keypress event to the correct input field, then checks for which key was pressed. If it was the enter button (13), it then prevents the default action (form submission) from happening. See it in action here: http://jsfiddle/cchana/UrHz7/2/