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

时间:2014-04-30 05:11:06   收藏:0   阅读:396

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

既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框,如下:

[html] view plaincopy
 
  1. <input id="hiddenText" type="text" style="display:none" />   

现在代码成了这样:

 

[html] view plaincopy
 
  1. <form name="keywordForm" method="post" action="">    
  2. <p id="profile_nav">    
  3. <label for="profile"> 关键字搜索: </label>    
  4. <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />    
  5. <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />  
  6. <input type="button" value="搜索" onClick="searchKeyword()">    
  7. </p>   
  8. </form>  

 

结论是,可以采取两种方法解决这种问题:1.去掉表单;2.如果非得用表单,只要不让表单里有且只有一个文本框就OK了。

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

[html] view plaincopy
 
  1. <form name="keywordForm" method="post" action="" onsubmit="return false;">    
  2. <p id="profile_nav">    
  3. <label for="profile"> 关键字搜索: </label>    
  4. <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />    
  5. <input id="hiddenText" type="text" style="display:none" onkeypress="searchKeywordKeyboard(event)" />  
  6. <input type="button" value="搜索" onClick="searchKeyword()">    
  7. </p>   
  8. </form>  

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

键盘回车事件导致页面刷新的问题,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!