web前段--js/jquery定义键盘回车事件导致页面刷新的问题(踩坑)

最新推荐文章于 2023-03-24 16:38:42 发布
最新推荐文章于 2023-03-24 16:38:42 发布
阅读量880 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JAVA基础 文章标签： js enter 回车键
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baidu_38990811/article/details/79963189
本文介绍了解决网页表单中使用回车键进行搜索而不刷新页面的问题。通过三种方法实现：移除表单、增加隐藏文本框或阻止表单默认提交行为。

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

后台管理早写好了,运营过来跟我说,这个搜索能不能修改一下,直接用回车键来搜索,不希望每次都要去点击搜索按钮,后来我去改了下触发事件,发现怎么改都是刷新页面的效果,根本就没去ajax调取搜索接口,百度了一番,发现原来是form表单的原因.

原因:当form表单只有一个input框时,按下回车键,会自动提交表单,并且不会把你刚输入的关键字传递给服务器端.

修改思路:

1.去掉表单

2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行)

3.以上两点都不想使用,那么就还可以在表单后面加上一个onsubmit事件,返回false.阻止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"/> <
复现CVE-2020-11022/11023（jQuery XSS漏洞）
记录并分享学习安全的知识点..
05-31 7225
警告 请勿使用本文提到的内容违反法律。 本文不提供任何担保 一、漏洞描述 由于执行了消毒（sanitize）处理，也仍会执行将来自不受信任来源的HTML传递给jQuery的DOM操作方法（即html()、.append()等），从而导致xss漏洞。 二、影响版本 大于或等于1.2且在3.5.0之前的jQuery版本中 三、漏洞复现 poc如下： <!DOCTYPE html> <html> <head> &lt...
键盘回车事件导致页面刷新的问题
ygf215的专栏
12-22 570
<br /><br />在一个 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<inp
js回车事件导致页面自动刷新解决方案
晋商风范技术博客
04-06 2547
此原因一般是因为form里只含有一个input,在页面里再增加一个hiddeninput及回车事件onkeypress即可避免。
js vue项目中搜索时调用enter键盘key，按enter时导致页面刷新
weixin_40524748的博客
06-25 389
问题应该是类似于点击冒泡一样， 有个优先级，这个时候enter事件先触发了form的submit事件，所以导致了这个问题，在form组件的那一行上加上 @submit.native.prevent 就行了 <Form @submit.native.prevent> ...
js刷新页面代码！
yueli0413的专栏
05-20 1635
本文来源于http://hi.baidu.com/songjianming/blog/item/159ed517d972350dc93d6d0d.html2008-01-23 12:47 　　今天突然遇到一个问题，要用js刷新页面！以前曾不屑一顾的js想不到今天要用到了
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
标题中的“jquery-3.5.1.min.js”代表的是jQuery库的3.5.1版本的压缩后的最小化文件，这种格式的文件通常用于实际生产环境中，以减小页面加载时间。"jquery-3.5.1.min.js"是这个特定版本的核心文件，包含了所有...
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
11-01
jQuery，作为JavaScript库的代表性作品，一直以来都是Web开发者的重要工具。这个压缩包包含了两个版本的jQuery——`jquery-1.11.1.js`和`jquery-1.11.1.min.js`，它们都是官方发布的jQuery 1.11.1版本。这两个文件的...
jQuery实现键盘回车搜索功能
10-19
总的来说，通过结合使用jQuery的事件处理和DOM操作，我们可以轻松地实现键盘回车搜索功能。这种方法提高了用户体验，让用户能够更自然地进行搜索操作。在实际开发中，你可能还需要考虑其他因素，如错误处理、异步...
jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】
11-01
`jquery-1.9.1.js`是未压缩的源代码版本，便于开发者阅读、调试和学习，而`jquery-1.9.1.min.js`是经过压缩和优化后的版本，体积更小，适用于生产环境，以提高页面加载速度。 jQuery 1.9.1版本是一个重要的里程碑，...
js键盘事件
别人笑我太疯癫，我笑他人看不穿。
03-24 371
keydown和keypress看似是一样的效果，但其实他们的细节不同，keydown事件触发时键盘的code值是码值，而keypress获取到的code是字符编码。而且keypress在很多浏览器中极容易失效，所以它不好用，一般都是使用keydown。keydown:在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件仅在松开键盘时触发一次，不是一个连续的响应状态。keypress:按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。
jquery 回车事件会触发页面刷新，自动提交表单
m0_37693130的博客
11-22 518
当form表单只有一个input框时,按下回车键,会自动提交表单 解决办法: 1.去掉<form>表单标签 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) <input type="text" id="" name="" style="display: none;"/> 不能使用<input type="hidden" i...
JQuery的焦点事件focus() 与按键事件keydown() 及js判断当前页面是否为顶级页面 子页面刷新将顶级页面刷新 window.top.location...
weixin_34315665的博客
07-03 217
相关代码如下,使用看注解 <script type="text/javascript"> if(window.self != window.top){ window.top.location = window.location; } $(functio...
js阻止浏览器的默认行为以及停止事件冒泡（用JQuery实现回车提交，兼容IE、FF浏览器） ......
weixin_33970449的博客
07-13 167
2019独角兽企业重金招聘Python工程师标准>>> ...
移动端点击键盘回车事件，页面刷新问题解析
月来better
03-30 488
解决方法：@submit.native.prevent <v-form :model="form" ref="form" @submit.native.prevent> <v-text-field class="text-body-1" v-model="userName" :label="usernamePlaceholder" outlined required :rules="
页面回车事件点击跳转
zhenhuaYang 的个人博客
11-12 2121
<input class="snasub" type="button" value="提交" onclick="return question()" id="button">document.onkeydown = function (e) { var theEvent = window.event || e; var code = theEvent.keyCode || theEv
js控制点击按钮，局部刷新页面
weixin_44249754的博客
04-13 5983
jQuery contextmenu() 方法 contextmenu() 函数用于添加事件处理程序到 contextmenu 事件。 注意：.contextmenu() 方法只是作为 .on( “contextmenu”, handler ) 的一个速记写法，移除该事件可以使用 .off( “contextmenu” ) 。 语法 $(selector).contextmenu( [even...
input 回车导致页面刷新解决方法
-ELZ-
09-22 3971
input 回车导致页面刷新解决方法 input 的回车事件 若 form 里面只有一个 input。当 input 发生回车事件时，会触发 form 自动提交数据事件，并刷新整个页面或跳转到 action 指定的路径。对于一些情况来说，并不需要刷新整个页面，需要的是局部刷新效果。 **第一种方法：**取消 form 的默认提交事件 <html> <body> <form onsubmit="return false;">
el-input 回车刷新页面
m0_49623851的博客
11-30 507
el-input 回车刷新页面 当form表单中只有一个Input组件的时候，在输入框中按下回车就是提交该表单并且会自动刷新页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呆呆_小茗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值