键盘回车事件导致页面刷新的问题

Published: 13 Jun 2018 Category: web

今天遇到一个问题,在文本框中输入关键字按回车,页面自动刷新了。结果搜了一下,是因为按回车后默认提交了表单。而且触发条件很狗血:

一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。

解决办法:

  1. 去掉表单;
  2. 如果非得用表单,只要不让表单里有且只有一个文本框就OK了。比如加一个隐藏的文本框:

     <input id="hiddenText" type="text" style="display:none" /> 
    

如果以上的方法还不足以让你去解决问题,那么你可以用以下方法来阻止因为回车而引起的表单自动提交:

<form name="keywordForm" method="post" action="" onsubmit="return false;">    
<p id="profile_nav">    
<label for="profile"> 关键字搜索: </label>    
<input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />    
<input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />  
<input type="button" value="搜索" onClick="searchKeyword()">    
</p>   
</form> 

就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

REF

http://www.nowamagic.net/html/html_EnterCouseReflesh.php