asked on

Disable enter key in HTML forms

I am trying to use the following code to prevent form submissions from using the enter key. The enter key should only work when the user is on the submit button or in a textarea field. What am I missing?

<script type="text/javascript">
function noEnter()
{
if (event.keyCode==13 && (event.srcElement.type != "submit" || event.srcElement.tagName != "textarea"))
event.keyCode==0;
return false;
else
return true;
}
</script>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onkeypress="noEnter();">

brunoguimaraes

Put some alerts in the JavaScript code to see if it's really being called.

You could also try onKeyDown instead of onKeyPress.

hielo

try this:
function noEnter()
{
if (event.keyCode==13 && (event.srcElement.type != "submit" || event.srcElement.tagName != "textarea"))
{
event.keyCode==0;
return false;
}
return true;
}

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ORScom

ASKER

hielo,

I tried both of your ideas. Neither worked. When the user enters the a filed like <input type="text" name="MyText"> and presses enter, it still submits the form.

ORScom

ASKER

brunoguimaraes,

I did an alert in, and yes, the function is being called.

SOLUTION

arunrs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hielo

move onkeypress="noEnter();" to the form element and see what happens

arunrs

I guess you also need the noEnter function to submit if you are in a textarea field.

So, you would be having it like

function noEnter()
{
if (event.keyCode==13 && event.srcElement.tagName == "textarea")
{
event.keyCode==0;
document.forms[0].submit();
return false;
}
return true;
}

Hope this is useful.
arunrs

gops1

Have a look at this sample:

<html>
      <head>
            <title>Script Demo Gops®</title>
            <style>body, table,input{font-family:verdana;font-size:xx-small;}</style>
            <script language="javascript">
                  function noEnter(evt){
                        evt = (evt) ? evt : event;
                        var charCode = (evt.which) ? evt.which : evt.keyCode;
                        if(charCode==13){
                              alert("Enter key pressed");
                              return false;
                        }
                  }
            </script>
      </head>
      <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onkeypress="return noEnter(event);">
            <input type="text" name="MyText">
      </body>
</html>

ORScom

ASKER

Thanks to hielo and arunrs,

Changing the submit button to type="button" made it work.

Points split between hielo and arunrs unless their are any objections.

*****************************************

Here's what I ended up using:

<script type="text/javascript">
function noEnter()
{
if (event.keyCode==13 && (event.srcElement.type == "submit" || event.srcElement.tagName == "textarea"))
{
event.keyCode==0;
return false;
}
return true;
}
</script>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onKeyDown="noEnter();">

...

<input type="button" value="Submit" onclick="this.form.submit();this.disabled='true';this.value='Please Wait..';">

arunrs

Hi ORScom,

Does the above code submits the form when you hit enter from the textarea because i don't see any submit action being done when you hit "Enter" other than trapping that key.

I guess you might have to submit the form if the key pressed is "Enter".

arunrs

gops1

Are you looking at this function to work only in IE then would be fine

ORScom

ASKER

It seems to work fine in IE, FF, and NS. It appears to keep the enter key from submitting the form unless you have tabbed on to the submit button.

hielo

ORScom, was this issue resolved? If so, could you please close this problem. Otherwise post an update.