How To Disable Enter Button In A Form?

Question

I have this HTML form: log in

user name :

Solution 1:

There are plenty of solutions for that. Here is one of the simplest:

<html><head><title>log in</title></head><body><formaction="login.php"method="POST"onsubmit="return false;">
        user name : <inputtype="text"name="user"><br>
        user pass : <inputtype="password"name="pass"><br><inputtype="button"value="submit"onclick="this.parentNode.submit();"></form></body></html>

DEMO:http://jsfiddle.net/EFDZ2/

Solution 2:

This is what worked best for me:

<inputid="input_id"type="text"><script>// prevent the enter key from submitting the form if input_id has focus to prevent accidental submissiondocument.getElementById('input_id').addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });
</script>

Solution 3:

Just to add on to VisioN's answer, there might be instances where the input is not a direct child of the form, so in these cases simply referring to the form as this.form will work.

<html><head><title>log in</title></head><body><formaction="login.php"method="POST"onsubmit="return false;">
        user name : <inputtype="text"name="user"><br>
        user pass : <inputtype="password"name="pass"><br><div><inputtype="button"value="submit"onclick="this.form.submit();"></div></form></body></html>

Solution 4:

Add the below script to the section of your page.

<scripttype="text/javascript">functionstopRKey(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"))  
        {
            returnfalse;
        }
   }
   document.onkeypress = stopRKey;
</script>

Solution 5:

$(document).ready(function() {

    functioncheckKey(e) {
        if (e.keyCode == 13) {

            if (!e) var e = window.event;

            e.cancelBubble = true;
            e.returnValue = false;

            if (e.stopPropagation) {
                e.stopPropagation();
                e.preventDefault();
            }
        }
    }

    $("input").keydown(checkKey);
})

This should work in all browsers. It requires JQuery to make life simpler. DEMO:http://jsfiddle.net/WDvvY/

Html5 Manual