Disable Enter key

[chartahir]

I want to disable the enter key to submit a form, how can i do this ?

[brothercake]

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?

[Mittineague]

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.

[brothercake]

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

[Logic Ali]

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.

That does not prevent submission, and if JS is not available, the button is a zombie.

[wysiwyg]

Don't use tabindex? Now you got me curious! Why??

[muazzez]

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

 
<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&#37;; 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>

http://javascript.internet.com/forms...enter-key.html

[brothercake]

Don't use tabindex? Now you got me curious! Why??

Have a look here - http://www.webaim.org/techniques/keyboard/tabindex.php

[Logic Ali]

I want to disable the enter key to submit a form, how can i do this ?

This may work for you: Link

[brothercake]

*sigh*

[Naseej-Designer]

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:

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

These are the basic components for the functionality you want. I hope you have the code to make this cross-browser compatible. You should also add the listener once the window has fully loaded. I don't have my actual code on the computer I'm using at the mo, which is why I'm not giving my actual code.

If you need it, I'll arrange that for you...

All the best!

[kyberfabrikken]

Have a look here - http://www.webaim.org/techniques/keyboard/tabindex.php

Nice.