博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
键盘回车事件导致页面刷新的问题
阅读量:5069 次
发布时间:2019-06-12

本文共 1655 字,大约阅读时间需要 5 分钟。

我最近在做一个 Ajax 查询的功能,代码如下:

1 <form name="keywordForm" method="post" action=""
2 <p id="profile_nav"
3 <label for="profile"> 关键字搜索: </label
4 <input style="width:80; height:20" type="text" name="keyword"onkeypress="searchKeywordKeyboard(event)" /> 
5 <input type="button" value="搜索" onClick="searchKeyword()"
6 </p>
7 </form>

在文本框中输入关键字按回车,页面自动刷新了,结果肯定是没有实现无刷新搜索了。想了想,可能是按回车后默认提交了表单,于是将form去掉,果然不刷了。但是还是会有很多地方需要用到form。

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

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

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

现在代码成了这样:

1 <form name="keywordForm" method="post" action=""
2 <p id="profile_nav"
3 <label for="profile"> 关键字搜索: </label
4 <input style="width: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了。

如果以上的方法还不足以让你去解决问题,那么你可以用以下方法来阻止因为回车而引起的表单自动提交:

1 <form name="keywordForm" method="post" action="" onsubmit="return false;"
2 <p id="profile_nav"
3 <label for="profile"> 关键字搜索: </label
4 <input style="width: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 提交。

转载自:http://www.nowamagic.net/html/html_EnterCouseReflesh.php

转载于:https://www.cnblogs.com/giho/p/4871942.html

你可能感兴趣的文章
迭代器和生成器
查看>>
codevs 1080 线段树练习
查看>>
[No0000195]NoSQL还是SQL?这一篇讲清楚
查看>>
【深度学习】caffe 中的一些参数介绍
查看>>
Python-Web框架的本质
查看>>
QML学习笔记之一
查看>>
Window 的引导过程
查看>>
App右上角数字
查看>>
从.NET中委托写法的演变谈开去(上):委托与匿名方法
查看>>
小算法
查看>>
201521123024 《java程序设计》 第12周学习总结
查看>>
新作《ASP.NET MVC 5框架揭秘》正式出版
查看>>
IdentityServer4-用EF配置Client(一)
查看>>
WPF中实现多选ComboBox控件
查看>>
读构建之法第四章第十七章有感
查看>>
Windows Phone开发(4):框架和页 转:http://blog.csdn.net/tcjiaan/article/details/7263146
查看>>
Unity3D研究院之打开Activity与调用JAVA代码传递参数(十八)【转】
查看>>
python asyncio 异步实现mongodb数据转xls文件
查看>>
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>