I have a form with an input for email.

<form action="." method="post">
    <div id="email-wrapper">
        <input type="text" placeholder="Your email" name="email" ref="email" onChange={this.handleChange}/>
    </div>
    <span class="signup-error">Please provide a valid email.</span>
</form>
....
....
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

When the button is pressed I validate with simple regex to confirm that its an email address, and this is working fine. However, if I press enter (key=13), it directs to someother page and this is the error I see:

Cannot POST /

I thought this script would handle the problem, but it didn't:

handleChange = (event) => {
    event.preventDefault();
    var keyCode = event.keyCode || event.which;
    if (keyCode == '13'){
        console.log('enter pressed');
    }
}

What's going on? How can I prevent redirection that occurs when I press enter key in an input field? Could you please help me. Thank you.

I have a form with an input for email.

<form action="." method="post">
    <div id="email-wrapper">
        <input type="text" placeholder="Your email" name="email" ref="email" onChange={this.handleChange}/>
    </div>
    <span class="signup-error">Please provide a valid email.</span>
</form>
....
....
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

When the button is pressed I validate with simple regex to confirm that its an email address, and this is working fine. However, if I press enter (key=13), it directs to someother page and this is the error I see:

Cannot POST /

I thought this script would handle the problem, but it didn't:

handleChange = (event) => {
    event.preventDefault();
    var keyCode = event.keyCode || event.which;
    if (keyCode == '13'){
        console.log('enter pressed');
    }
}

What's going on? How can I prevent redirection that occurs when I press enter key in an input field? Could you please help me. Thank you.

• javascript
• html
• html-input

• Have you tried handling the onKeyPress event? Also, try returning false when the Enter key is pressed. You'll need to return handleChange in your event wireup (something like <input type="text" onKeyPress="return handleChange(event)" />) – joe_coolish Commented Jul 25, 2016 at 18:10
• @joe_coolish onKeyPress actually helped preventing from redirecting. Thank you. – Karl Commented Jul 25, 2016 at 18:38
• Good to hear! I added my suggestion as an answer, if you feel like it deserves the check mark – joe_coolish Commented Jul 25, 2016 at 19:06

4 Answers 4

This is because the actions is done on the form when you hit enter. So you need to catch the action from the form and prevent defaults.

you can use the same event handler on onsubmit of the form

<form action="." onsubmit={this.saveAndContinue} method="post">
....

First off handle the input fields onkeypress like so:

<input type="text" placeholder="Your email" name="email" ref="email" onkeypress="handleEnterKey(event)"/>

Then create the function handleEnterKey as follows:

function handleEnterKey(e){ 
    if(e.keyCode == 13){ // enter pressed
        try{
            e.preventDefault ? e.preventDefault() : (e.returnValue = false);

            //DO ALTERNATE ACTION RATHER THAN SEND ENTER

        }catch(err){
            console.log(err.message); 
        }
    }
}

Also sometimes in older version of Internet Explorer and lesser known browsers the event.preventDefault() will not be sufficient to stop the enter key from propogating to parent so you can alternatively use:

event.stopPropagation();

Hope this helps.

Try handling the onKeyPress event. You'll need to return false when the Enter key is pressed in your handleChange function. You'll need to return the return value in your handleChange function in your event wireup; something like

<input type="text" onKeyPress="return handleChange(event)" />

In all, you can try:

<form action="." method="post">
    <div id="email-wrapper">
        <input type="text" placeholder="Your email" name="email" ref="email" onKeyPress={return this.handleChange(event)}/>
    </div>
    <span class="signup-error">Please provide a valid email.</span>
</form>
....
....
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

<script>
    handleChange = (event) => {
        event.preventDefault();
        var keyCode = event.keyCode || event.which;
        if (keyCode == '13'){
            console.log('enter pressed');
            return false;
        }
    }
</script>

try adding return false; in front of your functions in your onClick attribute