如何防止在输入字段中按回车键时发生重定向？答案

【问题标题】：How to prevent redirection that occurs when pressing enter key in an input field?如何防止在输入字段中按回车键时发生重定向？
【发布时间】：2016-11-29 04:43:23
【问题描述】：

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

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

当按下按钮时，我使用简单的正则表达式进行验证，以确认它是一个电子邮件地址，这工作正常。但是，如果我按 Enter (key=13)，它会指向其他页面，这是我看到的错误：

无法发布/

我认为这个脚本可以解决问题，但它没有：

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

发生了什么事？如何防止在输入字段中按回车键时发生重定向？请你帮助我好吗。谢谢。

【问题讨论】：

您是否尝试过处理onKeyPress 事件？此外，请尝试在按下 Enter 键时返回 false。您需要在您的活动连线中返回 handleChange（类似于 <input type="text" onKeyPress="return handleChange(event)" />）
@joe_coolish onKeyPress 实际上有助于防止重定向。谢谢。
很高兴听到！我添加了我的建议作为答案，如果您觉得它值得打勾

标签： javascript html html-input

【解决方案1】：

这是因为当您按 Enter 时，这些操作是在表单上完成的。因此，您需要从表单中捕获操作并防止出现默认值。

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

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

【讨论】：

【解决方案2】：

尝试处理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>

【讨论】：

【解决方案3】：

首先像这样处理输入字段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() 不足以阻止 enter 键传播到父级，因此您可以选择使用：

event.stopPropagation();

希望这会有所帮助。

【讨论】：

出于某种原因，这是唯一适合我的解决方案，谢谢！

【解决方案4】：

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

【讨论】：