zoukankan      html  css  js  c++  java
  • 键盘回车事件导致页面刷新的问题

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

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

    [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="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="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 提交。

  • 相关阅读:
    今天晚上有个什么样的博文呢
    STM8CubeMx来了
    开博啦
    Authentication
    文件上传设计要点
    分布式杂记
    SQL Server 知识集
    C# 集合使用误区
    网络知识集
    关于 elasticsearch 近实时特征的思考
  • 原文地址:https://www.cnblogs.com/panshengqiang/p/3695730.html
Copyright © 2011-2022 走看看