踩坑记--form表单中input的回车时刷新页面

最新推荐文章于 2025-06-05 13:39:52 发布
最新推荐文章于 2025-06-05 13:39:52 发布
阅读量1.9k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fangge_/article/details/80284366
本文描述了一个使用Bootstrap Table插件的项目中遇到的搜索功能问题。点击搜索按钮正常工作，但在按下输入框的回车键时，却加载了所有数据且清空了输入内容。通过分析，发现问题在于表单的默认提交行为导致页面刷新。解决方案是去掉form标签或阻止默认提交。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景介绍：项目中用到bootstrap-table插件，需要实现搜索功能；

问题描述：点击搜索按钮正常实现搜索功能，接下来，绑定回车事件搜索时，一直加载所有数据，并且input被清空；

 

 

图1

图2

解决流程：开始一直以为是bootstrap-table插件给input绑定了回车事件并清空了input，在插件里找了半天也没找到对应回车事件，后来发现input回车时页面刷新，才找到了问题的根源，去掉了form标签或者阻止默认的提交即可。

Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1878
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
Form表单input文本输入框回车键提交问题
weixin_44549995的博客
06-09 1237
Form表单input文本输入框回车键提交问题 当Form表单只有一个inupt文本输入框时，那个文本输入框存在着回车键按下提交from表单事件 而往往我们在使用from表单时为了方便一般都会在输入完文本框后进行给文本框添加键盘事件 一般都是回车键按下或弹起调用方法而当我们在布局form表单时只有一个文本框时他的回车键就会 触发form表单提交从而使你给回车键添加事件会无效果这会让我们遇到无法添加...
js刷新页面 方法大全
07-22
js刷新页面 方法大全 1.window指代的是当前页面，例如对于此例它指的是top.html页面。 2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 3.frames是window对象，是一个数组。代表着该框架内所有子页面。 4.item是方法。返回数组里面的元素。 5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。
from表单键盘回车导致页面刷新
weixin_41941325的博客
06-21 2719
如图所示，这样一个搜索栏，点击输入内容后按回车键达到搜索目的。 一开始代码如下： HTML： &lt;form action="#"&gt; &lt;input type="search" placeholder="搜索商品" class="search_input" v-model="keyword" @keyup.enter="doSearch&quot
在表单输入框按回车页面刷新的问题
最新发布
Amy_cx的博客
06-05 468
当表单(form)中仅有一个输入框时，按回车会触发页面刷新(标准行为)。解决方案：1) 在表单添加@submit.native.prevent阻止默认提交(推荐)；2) 移除form标签；3) 添加隐藏输入框。
解决input输入框按下回车键刷新页面
weixin_30845171的博客
04-27 923
input输入框键盘事件按下回车键的时候，竟然刷新了整个页面，用户体验相当不好，原来是form表单提交的时候会刷新页面解决方法如下： 方法一：　 <form onsubmit="return false;">....</from> 方法二：全局控制键盘按下事件，当键码值为13直接return false document.onkeyup=function...
Form表单回车刷新问题
weixin_30653097的博客
08-22 279
症状： 　　当一个form表单内只有一个文本输入框时，当我们按下回车键会自动刷新页面内容，现象代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=...
前端-输入框input按下enter刷新浏览器
weixin_49914438的博客
04-25 588
【起因】只有一个输入框的时候，在搜索烂输入关键字后，点击键盘的Enter后 浏览器进行了刷新。时会出现回车页面刷新的问题。
JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单
01-08
在JSP中，当一个FORM表单中只有一个INPUT文本输入框时，用户按下回车键，浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为：在一个只有一个单行文本输入域（type="text"）的表单里，按下回车键会模拟点击...
如何防止INPUT按回车自动提交表单FORM
11-29
在网页设计中，表单（`<form>`）是用户与服务器进行交互的重要元素，而输入框（`<input>`）则是用户输入数据的主要界面组件。然而，浏览器默认的行为是，当用户在单个输入框中按下回车键时，会触发表单的提交事件。...
input框回车事件
xm的博客
08-07 2823
input框回车事件，有以下三种写法： http://yayihouse.com/yayishuwu/chapter/2241
Form表单input回车提交问题
dz45693的专栏
12-31 3306
问题：文本框输入完成后点击回车页面刷新 问题出在form上，当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容，就会发生刷新事件。 发现问题所在就好解决问题了。 现在有三种解决方案： 1.全局禁用回车事件 function document.onkeydown() { var e = event.srcElement; if (event.k...
Form表单Input中按enter键自动提交的问题
Mr_linjw的专栏
10-17 2903
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个。，按回车键表单会自动提交，但是当表单中存在多个。时，按回车键不会执行任何操作，这是。
Form表单 回车(Enter)提交表单问题
qq_37609418的博客
06-15 8783
在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n
input回车事件未实现但页面刷新
yehaifanxing的专栏
03-14 5131
input 的回车事件不运行，刷新当前页面
form提交刷新页面显示重新提交解决方法
热门推荐
June的专栏
02-21 1万+
form提交会出现该问题，这时候需要把form体检改为window.location.href；但是我需要传参数给后台，会出现乱码的问题；解决如下： function search(){ var title=$("#s").attr("value"); window.location.href="${b
el-form表单单个输入框回车刷新页面
12-29
### 防止 Element UI `el-form` 表单内输入框按回车键时页面自动刷新 为了防止 `el-form` 中单个输入框按回车键时页面自动刷新，可以采用多种方式来处理这个问题。 #### 方法一：阻止表单默认提交行为 通过在 `<el-form>` 标签上添加 `@submit.native.prevent` 属性，能够有效阻止表单的默认提交动作。这种方式适用于整个表单范围内的所有按键操作： ```html <el-form :model="Form" label-width="100px" @submit.native.prevent> <el-form-item label="名称"> <el-input v-model="Form.name"></el-input> </el-form-item> </el-form> ``` 这种方法简单直接，不需要额外修改其他地方的代码[^3]。 #### 方法二：监听特定输入框的键盘事件 对于具体的某个输入框来说，可以通过绑定 `@keyup.enter.native` 事件处理器来捕获用户的回车键按下事件，并执行自定义逻辑而不是触发表单提交: ```html <el-input v-model="value" @keyup.enter.native="handleEnter"></el-input> <script> export default { methods: { handleEnter() { console.log('Enter key pressed'); // 自定义逻辑... } } } </script> ``` 此方案允许开发者针对不同场景灵活响应用户交互需求[^2]。 #### 方法三：隐藏多余的不可见输入字段 如果确实只需要一个可见的输入控件，则可以在表单里加入另一个样式设置为 `display:none` 的隐式输入域，从而避免浏览器认为当前只有一个可编辑区域而将其视为搜索栏或登录框等情况下的特殊对待： ```html <el-form :inline="true" :model="queryParams"> <el-form-item label="名称" prop="keyword"> <el-input v-model="queryParams.keyword" @keyup.enter="handleQuery"/> </el-form-item> <!-- 添加一个隐藏的 input --> <input type="text" style="display:none;" /> </el-form> ``` 这种做法虽然有些取巧但不失为一种有效的临时措施[^4]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值