如何防止在输入字段中按Enter键时发生重定向？

Karl 发表于 Dev

卡尔

我有一个带有输入电子邮件的表格。

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

这是怎么回事？如何防止在输入字段中按Enter键时发生的重定向？请你帮助我好吗。谢谢你。

joe_coolish

尝试处理该onKeyPress事件。您需要return false在handleChange功能中按下Enter键。您需要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>