點擊回車,頁面刷新問題


  問題出現原因:在做搜索時,由於只有一個條件,所以界面上有一個文本框,一個搜索按鈕,為文本框添加了回車事件,但是在文本框輸入值點擊回車后,出現了搜索結果之后界面被刷新了,原因是,因為文本框在form表單中,點擊回車,則提交了表單,刷新了界面。

  解決辦法:

  1,將form表單改為div。

  2,在form表單中再添加一個文本框,可以設置其為隱藏,這樣點擊enter回車事就不會刷新頁面了。因為一個表單下,如果只有一個文本框時,按下回車將會觸發表單的提交事件。如下:

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

  3,在form標簽中添加onsubmit 事件,返回 false,來阻止 form 提交。如下:

  <form name="keywordForm" method="post" action="" onsubmit="return false;">   

  4,添加JavaScript代碼,禁止頁面的Enter回車事件,代碼如下:

<script type="text/javascript">
document.onkeydown = function() {
    var evt = window.event || arguments[0];
    if (evt && evt.keyCode == 13) {
        if (typeof evt.cancelBubble != "undefined")
            evt.cancelBubble = true;
        if (typeof evt.stopPropagation == "function")
            evt.stopPropagation();
     return false; }
return true; } </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM