表单里的默认enter方法

最新推荐文章于 2023-02-01 14:57:58 发布
最新推荐文章于 2023-02-01 14:57:58 发布
阅读量157 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44473483/article/details/118382655
版权

今天做vue项目，里面使用了一个input组件，原本想按enter按键之后执行自定义方法，但是发现点击enter按键时会默认自动刷新页面，找了很久才明白原因，特此记录一下

在html里面，如果form里面只存在一个input标签，那么系统会默认会给enter按键绑定上submit方法。如果未定义提交的路径，就会自动刷新页面。所以在vue里使用el-from组件，如果只有一个input标签，那么就会出现enter刷新清况。

解决方法如下：
第1步.@submit.native.prevent

在form标签上添加@submit.native.prevent，可以禁止enter的绑定

第2步.然后直接在input组件上绑定需要的方法
@keypress.native.enter="Fun"
丹丹的小跟班
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候，接着触发keypress，松开按键的时候触发keyup事件 中文输入法： firfox：输入触发keydown，回车确认输入触发keyup chrome：输入触发keydown、keyup，回车确认输入只触发keydown IE：输入触发keydown、keyup，回车确认输入触发keydow
form表单中去掉默认的enter键提交并绑定js方法实现代码
10-27
然而，有时候我们可能希望阻止这一默认行为，转而自定义`Enter`键的功能，比如通过JavaScript绑定特定的方法。本文将详细介绍如何在`form`表单中取消`Enter`键的默认提交行为，并绑定自定义的JavaScript函数。 首先...
vue按下enter默认刷新页面bug
qq_30351747的博客
09-26 343
vue按下enter默认刷新页面bug vue按下enter默认刷新页面，原因是form表单里按下键盘会默认提交表单，而刷新页面。 解决 代码 @submit.native.prevent
@keyup.enter.native事件和中文输入法状态下输入的英文产生的冲突。
qq_42483780的博客
12-10 1009
在改bug的时候遇到测试提交的一个bug，拼音输入admin，敲击回车键选择英文admin时，页面提示账号密码错误。 代码： 有bug的 <el-input v-model="formLogin.username" placeholder="输入账号" @keyup.enter.native="submitForm('formLogin')"> 修改之后的 <el-input...
@keyup.enter.native不生效问题解决
RD_Xiaobai的博客
02-01 3119
输入框回车事件失效@keyup.enter.native不生效问题解决。
vue中的.native修饰符
缓慢前行的CV打工人
08-11 3571
native事件修饰符相关技术点
jquery实现Ctrl+Enter提交表单的方法
10-23
当用户按下Enter键且同时按住Ctrl键时，`performAction`函数会被调用，并阻止默认的Enter键行为（防止表单立即提交）。此外，我们还为指定的按钮绑定了一个点击事件，同样调用`performAction`函数，确保用户也能通过...
禁止按回车键提交表单的方法
12-01
一是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。 二是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和...
使用JQuery实现Ctrl+Enter提交表单的方法
11-22
当然，由于输入框是一个多行文本输入框textarea，我们知道，在textarea中按Enter(回车)键可以换行，并不能直接提交表单(submit)，而默认情况下，浏览器忽略了Ctrl键。那么我们可以通过Javascript脚本来控制使用Ctrl+...
利用JS屏蔽页面中的Enter按键提交表单的方法
10-21
`event.preventDefault()`方法用于阻止事件的默认行为，即阻止Enter键触发表单的提交。添加了这段代码后，当用户按下Enter键时，表单将不会被提交。 然而，需要注意的是，JavaScript事件处理有冒泡和捕获两个阶段。...
HTML页面实现enter(回车)键自动登录操作
Healer_小振的博客
11-17 1万+
方法一: onkeydown="if(event.keyCode==13) document.all.login.click()" 注:【login】：登录按钮id属性 方法二 : 添加JS绑定,【login】为登录按钮id属性 <script> $(document).keydown(function(event){ if(event.keyCode==13){ document.getElementById("login")...
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
热门推荐
Kuroko's Development Notes
05-18 13万+
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写：   &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit...
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
hrbsfdxzhq01的博客
01-04 5674
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写： &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit"&..
vue的.native 修饰 ，解决iview中input 无法监听enter事件
Joe的博客
04-27 6897
有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on。例如： 直接写成下面这样enter事件将无效 <Input type="password" v-model="password" placeholder="password" @keyup.enter="handleSubmit()"> <Icon type="ios-...
vue中给buttion按钮添加键盘回车（enter）事件
yijiupingfan0914的博客
03-31 1万+
一、第一步： 给button按钮绑定@keyup.enter <div class="btn"> <!--如果是封装过的按钮，不是原生的按钮，需要加上.native才能生效--> <Button type="primary" @click="handleAddBook" @keyup.enter.native="handleAddBook">...
vue autocomplete_从零开始学习vue
weixin_39774219的博客
11-25 548
在github搜小程序我们可以看到许多用许多用vue开发的实例。到底什么是vue，我们不妨浪费一天时间来了解一下。一、什么是vueVue是一个JavaScript框架。作者是国内常年混迹知乎的一个前端大神。它的特点是响应式的双向数据绑定，和小程序很相似。vue官网地址：https://cn.vuejs.org/二、学习vue需要掌握什么基础1、掌握HTML/CSS/JavaScript/...
为什么 form表单中如果只有一个输入框，在输入时按Enter回车键会出发默认事件自动提交表单
最新发布
07-12
form表单中如果只有一个输入框，在输入时按Enter回车键会触发默认事件自动提交表单的原因是浏览器对于form表单的默认行为的处理。 按下Enter键会触发表单的默认提交行为，而如果表单只有一个输入框时，浏览器会默认将该输入框的输入内容作为表单的数据，并自动提交表单。这是浏览器为了方便用户操作和提高用户体验而设定的默认行为。 如果你希望避免这种情况发生，可以通过以下几种方式解决： 1. 使用多个输入框：在表单中添加一个隐藏的输入框或者一个无意义的输入框，这样就不会触发默认的提交行为。 2. 使用JavaScript阻止默认提交事件：可以通过JavaScript代码监听表单的提交事件，在事件处理函数中使用`event.preventDefault()`方法来阻止默认的提交行为。 3. 使用`<button>`元素代替`<input>`元素：将表单中的`<input>`元素替换为`<button>`元素，并设置`type="button"`，然后使用JavaScript代码监听按钮的点击事件，在事件处理函数中执行你想要的操作。 这些方法可以根据你的具体需求选择使用，以达到禁止默认提交行为的目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值