如何防止在输入框内按下回车键时发生重定向？

Question

我有一个包含电子邮件输入框的表单。

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

当按下按钮时，我使用简单的正则表达式进行验证以确认它是一个电子邮件地址，这个功能很好。然而，如果我按下回车键（key=13），就会跳转到其他页面，出现以下错误信息：

Cannot POST /

我认为这个脚本应该能够解决问题，但实际上并没有成功：

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

发生了什么？当我按下输入框中的回车键时，如何防止重定向？请帮助我。谢谢。

- Karl

---

你尝试过处理 onKeyPress 事件吗？此外，当按下 Enter 键时，请尝试返回 false。您需要在事件绑定中返回 handleChange（类似于 <input type="text" onKeyPress="return handleChange(event)" />）。 - joe_coolish

@joe_coolish onKeyPress 实际上帮助防止了重定向。谢谢。 - Karl

很高兴听到这个消息！我把我的建议添加为一个答案，如果你觉得它值得打勾。 - joe_coolish

Answer 1

这是因为当你按下回车键时，动作是在表单上执行的。因此，你需要捕捉表单上的动作并阻止默认操作。

你可以在表单的onsubmit上使用相同的事件处理程序。

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

- adrianj98

Answer 2

首先，像这样处理输入字段的onkeypress：

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

然后创建以下函数handleEnterKey，代码如下：

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); 
        }
    }
}

有时在旧版的Internet Explorer和较不知名的浏览器中，event.preventDefault()将无法足够地阻止回车键传播到父级，因此您可以选择使用：

event.stopPropagation();

希望这可以帮到您。

- DatumPlane

---

由于某些原因，这是唯一对我有效的解决方案，谢谢！ - Bernard Moeskops

Answer 3

尝试在您的onClick属性中，在您的函数前添加return false;。

- coderodour

Answer 4

尝试处理onKeyPress事件。当在您的handleChange函数中按下Enter键时，您需要return false。在您的事件绑定中，您需要返回handleChange函数的返回值; 类似于以下内容

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

总之，您可以尝试：

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

- joe_coolish