点击回车,页面刷新问题

  问题出现原因:在做搜索时,由于只有一个条件,所以界面上有一个文本框,一个搜索按钮,为文本框添加了回车事件,但是在文本框输入值点击回车后,出现了搜索结果之后界面被刷新了,原因是,因为文本框在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>
原文地址:https://www.cnblogs.com/shangec/p/8867005.html