[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Disable enter key in HTML forms

Posted on 2007-10-19
14
Medium Priority
?
263 Views
Last Modified: 2008-01-09
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();">
0
Comment
Question by:ORScom
  • 4
  • 4
  • 3
  • +2
14 Comments
 
LVL 9

Expert Comment

by:brunoguimaraes
ID: 20109334
Put some alerts in the JavaScript code to see if it's really being called.

You could also try onKeyDown instead of onKeyPress.
0
 
LVL 82

Expert Comment

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

Accepted Solution

by:
hielo earned 1000 total points
ID: 20109500
if that does not work, try this:
try this:
function noEnter()
{
 if (event.keyCode==13 && (event.srcElement.type == "submit" || event.srcElement.tagName == "textarea"))
{
   event.keyCode==0;
   return false;
}
 return true;
}
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:ORScom
ID: 20109841
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.
0
 

Author Comment

by:ORScom
ID: 20109846
brunoguimaraes,

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

Assisted Solution

by:arunrs
arunrs earned 1000 total points
ID: 20110066
Hi ORScom,

The problem is that you have defined your button as a Submit button. Hence, when you try to cature the keypress event, though it stops the "Enter" key from getting to the text field, it does not stop the submit action.

You can solve this by changing your

<input type="submit" value= "Press Me to Submit" />
into
<input type="button" value = "Press Me to Submit" onClick="doSubmit();"

You then need to have a function like

function doSubmit(){
     document.forms[0].submit();
}


You need not have the noEnter function any more.

Hope this is useful.
arunrs
0
 
LVL 82

Expert Comment

by:hielo
ID: 20110145
move onkeypress="noEnter();" to the form element and see what happens
0
 
LVL 5

Expert Comment

by:arunrs
ID: 20110252
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
0
 
LVL 17

Expert Comment

by:gops1
ID: 20110527
Have a look at this sample:

<html>
      <head>
            <title>Script Demo Gops&reg;</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>
0
 

Author Comment

by:ORScom
ID: 20111983
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..';">
0
 
LVL 5

Expert Comment

by:arunrs
ID: 20112165
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
0
 
LVL 17

Expert Comment

by:gops1
ID: 20113446
Are you looking at this function to work only in IE then would be fine
0
 

Author Comment

by:ORScom
ID: 20122581
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.
0
 
LVL 82

Expert Comment

by:hielo
ID: 20235326
ORScom, was this issue resolved? If so, could you please close this problem. Otherwise post an update.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question