Disabling enter key for form

JavascriptHtmlWindow

Javascript Problem Overview


I have been trying to disable the Enter key on my form. The code that I have is shown below. For some reason the enter key is still triggering the submit. The code is in my head section and seems to be correct from other sources.

disableEnterKey: function disableEnterKey(e){
		var key;      
     	if(window.event)
        	key = window.event.keyCode; //IE
     	else
            key = e.which; //firefox      

     	return (key != 13);
	},

Javascript Solutions


Solution 1 - Javascript

if you use jQuery, its quite simple. Here you go

$(document).keypress(
  function(event){
    if (event.which == '13') {
 	  event.preventDefault();
 	}
});

Solution 2 - Javascript

Most of the answers are in jquery. You can do this perfectly in pure Javascript, simple and no library required. Here it is:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

This code works great because, it only disables the "Enter" keypress action for input type='text'. This means visitors are still able to use "Enter" key in textarea and across all of the web page. They will still be able to submit the form by going to the "Submit" button with "Tab" keys and hitting "Enter".

Here are some highlights:

  1. It is in pure javascript (no library required).
  2. Not only it checks the key pressed, it confirms if the "Enter" is hit on the input type='text' form element. (Which causes the most faulty form submits
  3. Together with the above, user can use "Enter" key anywhere else.
  4. It is short, clean, fast and straight to the point.

> If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type" and many more...

Solution 3 - Javascript

In your form tag just paste this:

onkeypress="return event.keyCode != 13;"

Example

<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">

This can be useful if you want to do search when typing and ignoring ENTER.

/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)

Solution 4 - Javascript

try this ^^

$(document).ready(function() {
        $("form").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
    });

Hope this helps

Solution 5 - Javascript

For a non-javascript solution, try putting a <button disabled>Submit</button> into your form, positioned before any other submit buttons/inputs. I suggest immediately after the <form> opening tag (and using CSS to hide it, accesskey='-1' to get it out of the tab sequence, etc)

AFAICT, user agents look for the first submit button when ENTER is hit in an input, and if that button is disabled will then stop looking for another.

> A form element's default button is the first submit button in tree order whose form owner is that form element. > >If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button. > >Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.) > > https://www.w3.org/TR/html5/forms.html#implicit-submission

However, I do know that Safari 10 MacOS misbehaves here, submitting the form even if the default button is disabled.

So, if you can assume javascript, insert <button onclick="return false;">Submit</button> instead. On ENTER, the onclick handler will get called, and since it returns false the submission process stops. Browsers I've tested this with won't even do the browser-validation thing (focussing the first invalid form control, displaying an error message, etc).

Solution 6 - Javascript

The solution is so simple:

Replace type "Submit" with button

<input type="button" value="Submit" onclick="this.form.submit()" />

Solution 7 - Javascript

this is in pure javascript

        document.addEventListener('keypress', function (e) {
            if (e.keyCode === 13 || e.which === 13) {
                e.preventDefault();
                return false;
            }
            
        });

Solution 8 - Javascript

Here's a simple way to accomplish this with jQuery that limits it to the appropriate input elements:

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
	if (e.which == 13) e.preventDefault();
});

Thanks to this answer: https://stackoverflow.com/a/1977126/560114.

Solution 9 - Javascript

Just add following code in <Head> Tag in your HTML Code. It will Form submission on Enter Key For all fields on form.

<script type="text/javascript">
    function stopEnterKey(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 = stopEnterKey;
</script>

Solution 10 - Javascript

You can try something like this, if you use jQuery.

$("form").bind("keydown", function(e) {
   if (e.keyCode === 13) return false;
 });

That will wait for a keydown, if it is Enter, it will do nothing.

Solution 11 - Javascript

I checked all the above solutions, they don't work. The only possible solution is to catch 'onkeydown' event for each input of the form. You need to attach disableAllInputs to onload of the page or via jquery ready()

/*
 * Prevents default behavior of pushing enter button. This method doesn't work,
 * if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
 * the input. So method should be attached directly to the input 'onkeydown'
 */
function preventEnterKey(e) {
	// W3C (Chrome|FF) || IE
	e = e || window.event;
	var keycode = e.which || e.keyCode;
	if (keycode == 13) { // Key code of enter button
		// Cancel default action
		if (e.preventDefault) { // W3C
			e.preventDefault();
		} else { // IE
			e.returnValue = false;
		}
		// Cancel visible action
		if (e.stopPropagation) { // W3C
			e.stopPropagation();
		} else { // IE
			e.cancelBubble = true;
		}
		// We don't need anything else
		return false;
	}
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
	try {
		var els = document.getElementsByTagName('input');
		if (els) {
			for ( var i = 0; i < els.length; i++) {
				els[i].onkeydown = preventEnterKey;
			}
		}
	} catch (e) {
	}
}

Solution 12 - Javascript

I think setting a class to a form is much better. so I coded that:

HTML

<form class="submit-disabled">

JS

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('submit', function (e) {

        e.preventDefault()
    });
/**
 * </End>
 * Submit Disabled Form
 */

And also if you want to disable submitting only when Enter Key press:

/**
 * <Start>
 * Submit Disabled Form
 */
document
    .querySelector('.submit-disabled')
    .addEventListener('keypress', function (e) {
        if (e.keyCode === 13) {
            e.preventDefault()
        }
    });
/**
 * </End>
 * Submit Disabled Form
 */

Solution 13 - Javascript

in HTML file:

@keypress="disableEnterKey($event)"

in js file:

disableEnterKey(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
}

Solution 14 - Javascript

First you need to disable the form on submit, but re-enable it when clicked on the button. which or keycode is not used in this case, avoiding some problems with compatibility.

    let formExample = document.getElementbyId("formExample");//selects the form
    formExample.addEventListener("submit", function(event){ //must be used "submit"
       event.preventDefault();// prevents "form" from being sent
    })

To reactivate and submit the form by clicking the button:

    let exampleButton = document.getElementById("exampleButton");
    exampleButton.addEventListener("click", activateButton); //calls the function "activateButton()" on click 
    function activateButton(){
       formExample.submit(); //submits the form
    }

a variation of this would be

    let exampleButton = document.getElementById("exampleButton");
    exampleButton.addEventListener("click", activateBtnConditions); //calls the function "activateBtnConditions()" on click
    function activateBtnConditions(){
       if(condition){
          instruction
       }
       else{
          formExample.submit()
       }
    }

Solution 15 - Javascript

The better way I found here:

Dream.In.Code

action="javascript: void(0)" or action="return false;" (doesn't work on me)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionChris PinskiView Question on Stackoverflow
Solution 1 - JavascriptSteven JiangView Answer on Stackoverflow
Solution 2 - JavascriptTarikView Answer on Stackoverflow
Solution 3 - JavascriptYASH GAUTAMIView Answer on Stackoverflow
Solution 4 - JavascriptKentView Answer on Stackoverflow
Solution 5 - JavascriptEricsView Answer on Stackoverflow
Solution 6 - JavascriptSamir PatelView Answer on Stackoverflow
Solution 7 - JavascriptLakshanView Answer on Stackoverflow
Solution 8 - JavascriptMatt BrowneView Answer on Stackoverflow
Solution 9 - JavascriptKailas ManeView Answer on Stackoverflow
Solution 10 - JavascriptJaime RodriguezView Answer on Stackoverflow
Solution 11 - JavascriptDimon579View Answer on Stackoverflow
Solution 12 - JavascriptArash YounesiView Answer on Stackoverflow
Solution 13 - JavascriptMohammad HosseiniView Answer on Stackoverflow
Solution 14 - Javascriptluk267View Answer on Stackoverflow
Solution 15 - JavascriptДмитрий АйнутдиновView Answer on Stackoverflow