点击回车,页面刷新问题

  问题出现原因:在做搜索时,由于只有一个条件,所以界面上有一个文本框,一个搜索按钮,为文本框添加了回车事件,但是在文本框输入值点击回车后,出现了搜索结果之后界面被刷新了,原因是,因为文本框在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="" οnsubmit="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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值