input标签绑定keyup.enter事件后，按回车自动刷新页面问题

最新推荐文章于 2024-10-11 11:27:34 发布
最新推荐文章于 2024-10-11 11:27:34 发布
阅读量1.4k 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42338293/article/details/116955265
版权

如图在input标签中添加的回车事件，但是在页面中按回车会自动刷新页面

原因：回车会自动触发表单的提交事件，所以应该在表单中加 @submit.prevent='search'  阻止表单的默认事件，并触发search。

改成这样后按回车成功触发search事件

 

 

 

 

 

 

 

 

 

 

 

 

岂梦丶
关注
专栏目录
vue 绑定 keyup.enter 绑定回车键盘事件 enter键防止页面刷新
爱睡的虫虫
12-10 1768
关于vue中的@keyup.enter键盘事件无法生效的解决办法。
Vue 输入框组件 @input、@keyup.enter、@change、@blur
且听风吟的博客
02-16 3700
input input 事件结合了 keyup事件 和 change事件，会在keyup时判断值是否发生变化，变化了则触发该事件。 input 一般用于实时监听事件，只要输入的值变化了就会触发input。 keyup.enter keyup.enter事件是在pc上点击回车键触发，在手机上是需要点击输入键盘上的确定键触发。 click @click 与enter事件相似，在手机上都是要经过触发的虚拟键盘才会触发事件，一般用于触发事件。 blur blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发
详解input中change、input、keyUP(keyDown)的触发条件
gebieren的博客
05-22 1783
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style&gt
Vue 小组件input keyup.enter绑定
weixin_30375427的博客
03-03 162
<div id="todo-list-example"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <ul> <li is="todo-item" v-for="(todo,...
Vue入门-指令修饰符-@keyup.enter
最新发布
weixin_68929783的博客
10-11 403
Vue入门-指令修饰符-@keyup.enter
vue+element 键盘回车事件导致页面刷新的问题
树洞博客
03-20 3731
问题：input输入框输入内容，按键盘上的回车按钮，会刷新界面 解决方法： 1.如果回车时有方法需要调用，在调用方法的时候加上@keyup.enter.native <el-form-item label="参数标题/id" style="float: left;margin-left: 10px"> <el-i...
解决element + vue中使用@keyup.enter.native回车刷新页面问题
weixin_41696001的博客
06-30 1735
@keyup.enter.native
键盘回车事件导致页面刷新的问题
qq_69775429的博客
03-07 218
先在form表单加上@submit.prevent.native ， 然后在所需要操作的input加上@keyup.enter.native和onsubmit="false"
@keyup.enter事件不生效
04-05
@keyup.enter事件在输入框中按下回车键时会触发，但是如果你的代码中没有正确绑定该事件，它就不会生效。以下是一个简单的示例，演示如何使用@keyup.enter事件： ``` <input type="text" v-model="inputValue" ...
Python input报错
weixin_54141649的博客
09-09 2032
input转换成数字类型进行条件判断时直接回车产生报错改正方法。
element ui中bug记录，只有一个el-input框的时候会触发键盘的enter事件
qq_42483780的博客
03-25 424
bug如下：在element ui里面，如果页面只有一个el-input标签，那么鼠标放在input框上，按下enter事件会触发页面刷新。 解决办法如下： 在el-form标签上加上 @submit.native.prevent <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent> <el-form> ...
input输入框添加键盘事件
improvement
06-10 4151
input输入框添加键盘事件 1.普通input输入框添加键盘事件，keyup/keydown,假设打算按下enter键。 <el-input placeholder="请输入内容" @keyup.enter.native="methodsName"></el-input> 除了那几个特殊键，其余的可以将enter换成对应键盘码即可。 2.element-ui中input输入框添加键盘事件。 <el-input placeholder="请输入内容"
input 绑定 Enter 回车事件
y2964的博客
11-08 4592
【代码】input 绑定 Enter 回车事件。
JavaScript、jQuery、Vue给input绑定Enter回车事件
越努力，越幸运！
04-02 6526
前端工程师在开发时，经常会遇到这样的需求，产品要求用户在input框输入完内容后按enter键自动提交表单到后台，不需要单击“保存”按钮再提交，以提高用户体验，接来下会分别介绍在JS、JQ、Vue中如何给input绑定Enter回车事件 键盘事件 键盘事件触发次序：①onkeydow ②onkeypress ③onkeyup 属性 描述 onkeydown ...
element-ui 输入框键盘回车事件导致页面刷新
一片天空
09-29 2462
element-ui 输入框键盘回车事件导致页面刷新的处理方法。
@keyup.enter.native事件和中文输入法状态下输入的英文产生的冲突。
qq_42483780的博客
12-10 1080
在改bug的时候遇到测试提交的一个bug，拼音输入admin，敲击回车键选择英文admin时，页面提示账号密码错误。 代码： 有bug的 <el-input v-model="formLogin.username" placeholder="输入账号" @keyup.enter.native="submitForm('formLogin')"> 修改之后的 <el-input...
input输入框回车发送，移动端回车按钮的样式
m0_73341533的博客
05-04 1401
在输入时希望光标到最后的位置(通过选择内容修改的光标)根据需要放置。el-input标签用 @keyup.enter.native。enterkeyhint属性可以修改输入键盘的回车键的表现形式。对于移动端经常遇到输入键盘的回车是发送、搜索、下一项等样式。input用 @keydown.enter。需要配合事件触发不同的行为(以发送为例)在vue中采用以下方法监听事件。
使用html新属性enterkeyhint修改input、textarea中输入法回车键文字
艾小逗
06-16 2589
enter表示回车，多出现在``文本域等需要多行输入的场景中。 don`表示完成，表示没有更多内容输入，输入结束。 go表示前往，, 意思是把用户带到他们输入的文本的目标处。 next表示下一项，通常会移动到下一个输入项那里。 previous表示上一个，通常会移动到上一个输入项那里。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值