SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: Disable Enter key
-
Mar 7, 2007, 21:48 #1
- Join Date
- Oct 2006
- Location
- Karachi, Pakistan
- Posts
- 253
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Disable Enter key
I want to disable the enter key to submit a form, how can i do this ?
chartahir
-
Mar 7, 2007, 22:08 #2
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What you're suggesting is counter-accessibility - if you disable the enter key, you make it a lot more difficult for keyboard users to submit the form.
Why do you want this?
-
Mar 7, 2007, 22:12 #3
- Join Date
- Jul 2005
- Location
- West Springfield, Massachusetts
- Posts
- 17,290
- Mentioned
- 198 Post(s)
- Tagged
- 3 Thread(s)
submit
Don't use an input type submit. Use an input type button that calls your submit function instead. Just make sure you tabindex it so users can get to it and submit the form with their enter key.
Big Change Coming Soon - if you want your PMs save them now!
What you need to do to prepare for our migration to Discourse
A New SitePoint Forum Experience: Our Move to Discourse
-
Mar 8, 2007, 18:12 #4
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's one possibility yes, but it still breaks the keyboard access model to some extent - it is expected behavior that hitting enter from within a text field submits the form.
And don't tabindex it - don't use tabindex at all
-
Mar 8, 2007, 22:10 #5
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 8, 2007, 23:56 #6
- Join Date
- Mar 2006
- Location
- Sweden
- Posts
- 451
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Don't use tabindex? Now you got me curious! Why??
-
Mar 9, 2007, 04:04 #7
- Join Date
- Aug 2006
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<form action="foo"> <input type="text" onkeypress="return bar(event)"> <input type="submit"> </form> <script type="text/javascript"> function bar(evt){ var k=evt.keyCode||evt.which; return k!=13; } </script>
Code:<script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && (node.type=="text")) {return false;} } document.onkeypress = stopRKey; </script> <form name="form1" method="post" action=""> <fieldset id="form1" style="width: 30%; line-height: 30px;"> <label for="name">Name: </label> <input class="inputfield" name="name" maxlength="64" size="32" type="text"> <br> <label for="email">E-Mail: </label> <input class="inputfield" name="email" value="" maxlength="64" size="32" type="text"> <br> <label for="country">Country: </label> <input class="inputfield" name="country" value="" maxlength="64" size="32" type="text"> <br> <input value="Submit" name="send" type="submit" style="margin-left: 50px;" onclick="alert('This would have processed the form');"> </fieldset> </form>
Last edited by muazzez; Apr 18, 2007 at 13:14.
Bismillahirrahmanirrahîm
Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.
-
Mar 9, 2007, 04:39 #8
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Have a look here - http://www.webaim.org/techniques/keyboard/tabindex.php
-
Mar 9, 2007, 06:19 #9
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This may work for you: Link
Tab-indentation is a crime against humanity.
-
Mar 9, 2007, 22:05 #10
- Join Date
- Mar 2004
- Location
- Earth
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
*sigh*
-
Apr 2, 2007, 01:02 #11
- Join Date
- Jul 2006
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Chartahir,
Can we see the script you're using?
I was actually searching for the answer myself when I came across this thread, and managed to find the answer during my search.
What you have to realise is that the event triggered by the user when the Enter button is pressed is keypress (as well as keyup and keydown), but this also triggers a submit event on the form level. Therefore, you have to disable the submit event for this to work.
The reason why I needed this functionality was because I'm running a validation before the form can be submitted. So what I'm interested in is preventing the submit, so I don't really care what button is pressed to do this.
The way I did it was using an event listener that looks out for a submit event on the form and assigns an event handler function that checks to see if the textfield in the form is empty or not. If it is, it prevents submission (returns false). Otherwise, it allows the form to be submitted.
In other words:
HTML Code:<script type="text/javascript"> function validationFunc() { if(document.formName.textFieldName.value == ""){ alert("Please enter value"); return false; } } var formName = document.getElementById("formName"); formName.addEventListener('submit', validationFunc, false); </script>
If you need it, I'll arrange that for you...
All the best!
-
Apr 2, 2007, 01:30 #12
- Join Date
- Jun 2004
- Location
- Copenhagen, Denmark
- Posts
- 6,157
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks