我有一个包含电子邮件输入的表单。
<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
),它会指向另一个页面,这是我看到的错误:
无法POST /
我认为这个脚本可以解决问题,但它没有:
handleChange = (event) => {
event.preventDefault();
var keyCode = event.keyCode || event.which;
if (keyCode == '13'){
console.log('enter pressed');
}
}
发生了什么事?如何在输入字段中按Enter键时阻止重定向?请你帮助我好吗。谢谢。
答案 0 :(得分:1)
这是因为当您按Enter键时,操作会在表单上完成。因此,您需要从表单中捕获操作并防止默认值。
您可以在表单<{p>>的onsubmit
上使用相同的事件处理程序
<form action="." onsubmit={this.saveAndContinue} method="post">
....
答案 1 :(得分:1)
尝试在onClick属性
中的函数前添加return false;
答案 2 :(得分:0)
首先处理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();
希望这会有所帮助。
答案 3 :(得分:0)
尝试处理onKeyPress
事件。在return false
功能中按Enter键时,您需要handleChange
。您需要在事件连线中的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>