键盘回车事件导致页面刷新的问题

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

<form name="keywordForm" method="post" action="">

<p id="profile_nav">

<label for="profile"> 关键字搜索： </label>

<input style="width:80; height:20" type="text" name="keyword"onkeypress="searchKeywordKeyboard(event)" />

<input type="button" value="搜索" onClick="searchKeyword()">

</p>

</form>

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

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

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

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

现在代码成了这样：

<form name="keywordForm" method="post" action="">

<p id="profile_nav">

<label for="profile"> 关键字搜索： </label>

<input style="width:80; height:20" type="text" name="keyword"onkeypress="searchKeywordKeyboard(event)" />

<input id="hiddenText" type="text" style="display:none"onkeypress="searchKeywordKeyboard(event)" />

<input type="button" value="搜索" onClick="searchKeyword()">

</p>

</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 提交。

转载于:https://www.cnblogs.com/renyunbo/p/6441952.html

键盘回车事件导致页面刷新的问题相关推荐

vue+elementUI 键盘回车事件导致页面刷新的问题
在控件上已经添加了: @keyup.enter.native="searchProjects()" 监听,但是回车确是reload 页面,需要在表单上form上添加: <el ...
vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法...
一.阻止表单自动提交刷新页面:<el-form><el-form-item :inline="true" @submit.native.prevent>&l ...
当 el-form 组件下只有一个 el-input 组件时，按回车键会导致页面刷新
当 el-form 组件下只有一个 el-input 组件时,按回车键会导致页面刷新的问题可能是由于浏览器默认的表单提交行为所导致的.解决此问题的一种方法是使用 @submit.native.prev ...
popstate android4.3,微信安卓popstate后退导致页面刷新解决方案
问题描述: 在安卓机微信版本号为7.0.4到7.0.8下监听popstate事件时,当点击物理键返回时,浏览器会强制页面刷新,导致popstate中定义的一些事件因为刷新而受影响,比如出现弹窗闪退现象 ...
vue+element Form键盘回车事件页面刷新解决
问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...
android webview 刷新当前页面,Android WebView时重新加载导致页面刷新的问题
最近碰到一个需求,用WebView加载页面,选择了筛选条件之后,跳转到新的webVIew页面之后再返回,原来的筛选条件由于页面刷新导致已经清空,怎样才能解决返回的时候不去重新加载页面呢,网上很多答案是 ...
微信小程序软键盘回车事件
应用场景主要是在搜索的时候输入框输入完内容以后,点击软键盘上的回车调用搜索方法,代码如下: wxml: <input placeholder="粘贴商品标题或直接输入" va ...
gridview databind 会导致页面刷新马_Innodb批量页面刷盘情况下的quot;两次写quot;
//Innodb批量页面刷盘情况下的"两次写"// 之前的文章中,我们介绍过innodb的两次写特性,这里给出链接: InnoDB的两次写特性今天我们完善一下这部分的内容. 我们 ...
点击form 表单中的button导致页面刷新问题
2019独角兽企业重金招聘Python工程师标准>>> 做点击按钮切换背景样式与内容的时候每次都刷新页面 ,发现button写在了form 标签当中 <form>< ...

键盘回车事件导致页面刷新的问题

键盘回车事件导致页面刷新的问题相关推荐

最新文章

热门文章