5

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.

Bogdan
  • 1,869
  • 6
  • 24
  • 53
  • 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 Mar 27 '12 at 08:10
  • Yeah but suprisely most of the people do error's on the easiest tasks. – mas-designs Mar 27 '12 at 08:13
  • yes like using a possesive form instead of a plural :D. sorry, had to do it. – Bogdan Mar 27 '12 at 08:52

4 Answers4

10

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 comment 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.

Community
  • 1
  • 1
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • tried this but it still submits the form after the custom function. – Bogdan Mar 27 '12 at 08:45
  • @Bogdan are you sure it doesn't work. I've tested it in IE9, Chrome 19 and FF11. And all [seem to work](http://jsfiddle.net/6jLWx/). – PeeHaa Mar 27 '12 at 08:56
3

http://jsfiddle.net/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;
    }
});
Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
0

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;"/>
Carlos Parraga
  • 441
  • 6
  • 14
  • I think this answer could use a bit of additional explanation, especially as the original question indicated issues with other answers not being properly explained. – KevinO Apr 10 '18 at 01:14
-1

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.net/cchana/UrHz7/2/

cchana
  • 4,899
  • 3
  • 33
  • 43