I have a HTML form on my page. When i am putting some value in one of the text fields in form and press 'Enter key' the form gets submitted instantly. I think this is happening due to default focus is on submit button. But i try to remove that focus using blur() function, it is not working. I am using Chrome. Is there any way to avoid this scenario? All suggestions are wele. thanks in advance.

I have a HTML form on my page. When i am putting some value in one of the text fields in form and press 'Enter key' the form gets submitted instantly. I think this is happening due to default focus is on submit button. But i try to remove that focus using blur() function, it is not working. I am using Chrome. Is there any way to avoid this scenario? All suggestions are wele. thanks in advance.

• javascript

10 Answers 10

The Submit button is not actually focused; Enter in a text field is supposed to submit the form.

You could register a handler for the submit event, and then only allow it if the Submit button was actually focused at the time submit was requested.

However, you'll be deliberately breaking the way that HTML forms work. Not everyone wants to submit the form using the One True Way of actually clicking the Submit button (also, you'll be breaking accessibility and may introduce browser-specific bugs).

No. The focus is still on the text field. Pressing enter there is supposed to submit the form (and bypasses the submit button entirely).

You can suppress the behavior using JavaScript, but since it is normal behavior for the browser, I wouldn't remend doing so.

try this solution: replace the 'input' with 'button' and add attribute type equals 'button' and handle the onclick event with submit javascript function

<form name='testForm'>
<input type='text' value="myName" />
<button type='button' onclick='testForm.submit()'/>
</form>

i think it works also with tag input adding the same attribute Enjoy Mirco

blur() is the way to go. It works like this:

<button onclick="this.blur();">some button</button>

Note that you should not use JavaScript and DOM-events using Attributes. This is just for demonstration purposes. Try to be unobstrusive.

Maybe it will help you out, the form is "supposed" to be sent with enter in the text box (HTML by design), it is no a matter of focus.

If you want to avoid it, check this out.

This is the proposed script:

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

     return (key != 13);
}

Good luck, tell me if you need any clarification!

EDIT: I do agree with Piskvor answer, it may bring some bugs

this has nothing to do with the focus, its just the default behavior of you browser. to avoid this, you could try to cath the enter-keypress like this (Source - but there are a lot of other solutions (most working the same way, just using other events like the firms onsubmit instead of the documents onkeypress)):

function catchEnter(e){
      // Catch IE’s window.event if the
      // ‘e’ variable is null.
      // FireFox and others populate the
      // e variable automagically.

      if (!e) e = window.event; 
      // Catch the keyCode into a variable. 
      // IE = keyCode, DOM = which.
      var code = (e.keyCode) ? e.keyCode : e.which;

      // If code = 13 (enter) or 3 (return),
      // cancel it out; else keep going and
      // process the key.

      if (code == 13 || code == 3)
        return false;
      else
        return true;
}


// Anonymous method to push the onkeypress
// onto the document.
// You could finegrain this by
// document.formName.onkeypress or even on a control.
window.onload = function() { document.onkeypress = catchEnter; };

Change:

<input type="text" ... >

To:

<textarea ... ></textarea>

You may need to mess around with the attributes a bit, I've left them signified as ....

try to add on the keypress event of your button this javascript function :

function ButtonKeyPress()
 {

  var code = (window.event.which) ? window.event.which : window.event.keyCode;

  if ( code == 13 )
  { 
   event.returnValue = false;
   return false;
  }

  return true;

 }

So, you have a form. In this form, you have a text input, and a submit button. You get in the text input, you type some text, than you press "Enter". This submits the form. You would like to break this normal behavior.

I think this is not a good idea : The convention says that when your in a text input and press "Enter", it submits the form. If you change this behavior, users could be (I don't find the right word, let's say ~) surprised.

Anyway, if you still want to do this, you should listen for the keypress event on the text input, and than prevent default behaviour shoud do the work.

let's say you use jQuery :

$(input[type=text]).bind('keypress', function(evt) {
    if(evt.keyCode == 13) {
        evt.preventDefault();
    }
});

This should do it. I didn't test it, maybe I made mistakes, but you got the idea, no ?

And maybe keyup is better than keypress... I don't know very well this, not enough practice on key bindings

The easiest way is to set css style like this:

    &:focus {
      outline: 0 none;
    }