5

I have a form for which onkeyup triggers the creation of a suggestions box for certain fields. I am able to capture the keystrokes for the up arrow, for the down arrow and for escape and use them accordingly to move around in the suggestions box or close it. I would like to use enter to move their selection into the input field that triggered the suggestions. However, I seem to be unable to capture the enter keystroke.

Control never enters my JavaScript suggest function. Rather the form simply submits. I've tried noEnter functions that return false on enter passed into onkeypress and onkeydown for the input element in question, no dice. The form seems to grab control from all of the input event handlers and submit itself before any of them can do anything.

Does form submit override all other event handlers in fields, or is there something else going on here? If it does, is there some way around that?

Here's the element in question (some values removed):

<input type="text" name="myInput" id="myInputField" size="22" onkeypress="noEnter(event)" onkeyup="suggest(event)" onblur="hideSuggestions()">

And here's the javascript to catch it:

    var evnt = (event ? event : window.event);
    
    var key = evnt.keyCode;

    if(key == 13) { // Handle Enter
        alert("ENTER PRESSED.");
        hideSuggestions();
        return false;
    }

The alert never fires. Alerts put at the top of the function never fire either. For the escape key however, when I place the exact same code in an if checking for key == 27 the alert fires.

There are other questions on almost the same topic, such as this one: Prevent Users from submitting form by hitting enter #2

However, I am not using jquery and I only want to prevent enter from submitting for this one field. But none of the other solutions mentioned in various questions seem to work.

EDITTED: To explain where key is set.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Daniel Bingham
  • 12,414
  • 18
  • 67
  • 93
  • What is 'key' in your code? I'm trying to understand the rest of your function - maybe try doing alert(key) and see if the function is actually getting called and with which value of 'key' – Roman Jan 10 '10 at 18:04
  • Tried alerts, the function isn't getting called at all - let alone with key. – Daniel Bingham Jan 10 '10 at 18:11

1 Answers1

11

try changing the onkeyup event on the input to return the function result

so in the onkeypress event:

<input type="text" name="myInput" id="myInputField" size="22" onkeypress="return dontSubmit(event);" />

and then the JS:

function dontSubmit (event)
{
   if (event.keyCode == 13) {
      return false;
   }
}
Community
  • 1
  • 1
jedi58
  • 319
  • 3
  • 9
  • Worked for me, though I also seemed to need onsubmit="return false" in the form tag. – Highly Irregular Jul 16 '13 at 01:46
  • @HighlyIrregular This answer didn't work for me either, but your suggestion disabled *any* kind of submission for the whole form for me (even clicking the submit button with the mouse). – starsplusplus Apr 07 '15 at 14:36
  • @starsplusplus did you apply it to the submit button too? If not, the submit button should still work I think. – Highly Irregular Apr 08 '15 at 10:03
  • @HighlyIrregular Not specifically, but I think applying it to the whole form applies it to the submit button... at least it seemed to for me. – starsplusplus Apr 08 '15 at 11:18
  • @starsplusplus ah, yes. I think I had an alternative method of submitting defined, perhaps using ajax? Not sure, as it was quite some time ago I had the issue. – Highly Irregular Apr 09 '15 at 02:01