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

我有一个带有电子邮件输入的表单。如何防止在输入字段中按Enter键时发生重定向？

<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），它引导到一些其它页面，这是我看到的错误：

无法发布/

我想这个脚本会处理这个问题，但它没't：

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

发生了什么事？如何防止在输入字段中按Enter键时发生重定向？你可以帮我吗。谢谢。

来源

2016-07-25 Karl

您是否尝试过处理'onKeyPress'事件？另外，当按Enter键时尝试返回'false'。你需要在事件连接中返回'handleChange'（类似于''） –

@joe_coolish'onKeyPress'实际上有助于防止重定向。谢谢。 – Karl

好听！如果您觉得它应该有复选标记，我将我的建议作为答案加入 –

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

来源

2016-07-25 19:05:26

这是因为当您按Enter键时，表单上的操作完成。所以你需要从表单中捕捉行动并防止违约。

您可以使用相同的事件处理程序的形式onsubmit

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

来源

2016-07-25 18:09:36 adrianj98

首先处理输入字段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，并且减少[R知名浏览器event.preventDefault（）将不足以从propogating父所以您也可以使用停止输入键：

event.stopPropagation();

希望这有助于。

来源

2016-07-25 18:55:02 DatumPlane

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

来源

2016-07-25 19:01:24 coderodour

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

回答

相关问题