點擊回車,頁面刷新問題

  問題出現原因:在做搜索時,由於只有一個條件,所以界面上有一個文本框,一個搜索按鈕,爲文本框添加了回車事件,但是在文本框輸入值點擊回車後,出現了搜索結果之後界面被刷新了,原因是,因爲文本框在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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章