Element-ui使用@keyup.enter.native的原因

最新推荐文章于 2024-07-02 15:34:18 发布
最新推荐文章于 2024-07-02 15:34:18 发布
阅读量1.3w 收藏 31
点赞数 6
分类专栏： element-ui 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46724415/article/details/121451410
版权

@keyup.enter加.native有什么作用？
W3C 标准中有如下规定：
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。

使用Element-ui，因为Element-ui是封装组件，这个时候使用按键修饰符需要加上.native覆盖原有封装的keyup事件即可，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>
仰望天空的小小蜗牛
关注
  • 6
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue使用element-ui的el-input监听不了回车事件的解决方法
01-21
原因 今天在使用element-ui时，el-input组件监听不了回车事件，如下代码没有想要的效果： <el class=search-input placeholder=请输入内容 v-model=searchText keyup.enter=search()></el> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。 解决 在事件后面加上.native： <el-input cl
@keyup.enter.native和@click.native.prevent是什么意思
NSX-Truth
07-19 1万+
@keyup.enter.native和@click.native.prevent是什么意思 一、 @keyup.enter.native 一般vue的监听组件，是这样写 <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 但是， 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native <el-input v-model="account" placeholder="
element-ui 输入框键盘回车事件导致页面刷新
最新发布
s_156的博客
07-02 80
W3C标准的说法是：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。例如：<el-input placeholder=“输入号码回车即可呼叫” v-model=“num” @keyup.enter.native=“callOut”>现在这个form里只有一个input，你回车,它竟然没有触发事件，而是刷新页面了，而且放两个input就没问题了，element-ui提供了输入框的键盘事件：@keyup.enter.native=“callOut”
vue 回车触发聚焦 @keyup.enter.native
热门推荐
小冯的博客
09-21 5万+
vue登录界面输入用户名回车自动聚焦密码框 1.回车触发事件keyupClick： @keyup.enter.native="keyupClick";密码框里放: ref="mima" <van-field v-model="username" clearable type="tel" label="用户名" right-icon="questi...
@keyup.enter.native
m0_64411343的博客
08-24 2090
@keyup.enter.native
关于ElementUI 中 input 上加@keyup.enter.native事件会出现刷新整个页面的问题
lyl_csdn_89的博客
01-26 1344
form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以 在 form 标签上添加 @submit.native.prevent。<el-form-item label="关键字">
Vue 如何触发键盘enter事件
GongWei_的博客
01-05 3863
写法：@keyup.enter.native=“自定义事件” <Input v-model="form.checkCode" placeholder="请输入校验码" @keyup.enter.native="searchAllCompany"> <span slot="append"> {{ code }} </span> </Input> methods:{ searchAllCompany(){ .
vue element-ui 绑定@keyup事件无效的解决方法
08-27
在上面的代码中，`@keyup.native`确保了`getGameList`函数会在用户释放键盘键时被调用，即使Element-UI的`el-input`组件内部有其自己的事件处理逻辑。 总的来说，当遇到Vue Element-UI绑定`@keyup`事件无效的情况时...
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native|vue-50056.pdf
12-09
然而，需要注意的是，如果你在使用封装的组件（如Element UI的`el-input`），直接使用键盘修饰符可能不会生效。这是因为这些组件内部处理了键盘事件，为了监听到这些事件，你需要使用`.native`修饰符。例如： ```...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
@keyup.enter.native="searchAppNode"> </el-autocomplete> ``` 这样就能消除闪烁现象，保证用户切换输入建议时的平滑体验。 总结来说，解决Element-UI输入建议组件的问题，关键在于理解组件的预期数据格式和参数...
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
12-29
基于element-ui 组件 开发的vue.js项目， 实现回车键发起搜索，和原生的input 标签使用方法不一样： el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter 搜索 ...
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
花椒和蕊的博客
09-08 1739
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用（具体实现+踩坑篇）
element中input框添加@keyup.enter.native，按enter后刷新页面
c_qianxia5040的博客
06-04 641
原因：form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以 在 form 标签上添加 @submit.native.prevent就可以解决刷新整个页面的问题。按enter键本来是调用搜索接口，但却是刷新了整个页面。
vue @keyup.enter.native回车事件不生效问题
ITyangk的博客
11-13 781
@keyup.enter.native 单个input框不生效问题
native之使用场景，回车登录、搜索
m0_73661157的博客
04-12 212
native修饰符之使用键盘回车事件
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 992
el-input v-model="form.code" placeholder="请输入code"<el-input v-model="form.code" placeholder="请输入code"问题:@keyup.enter.native外部存在form表单，并且form表单里只有一个input。修改后：此时输入框输入后按回车键即会执行codeVerify方法。原因：当form表单内只有一个input按回车键会自动提交表单。原：此时输入框输入后按回车键不会执行codeVerify方法。
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
hrbsfdxzhq01的博客
01-04 5712
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使用回车键失效的解决方法
小小渔夫
06-23 4816
回车失效原因 查考相关文档得知：即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 。
<el-input @keyup.enter.native="login" @keydown.native="onkeydown" @input="input" placeholder="请输入密码" v-model="form.showPassword" />
07-15
根据提供的代码片段，这是一个使用 Element UI 组件库中的 `<el-input>` 组件的示例。这个组件是一个输入框，用于接收用户的输入。让我对代码进行解释： ```html <el-input @keyup.enter.native="login" @keydown.native="onkeydown" @input="input" placeholder="请输入密码" v-model="form.showPassword" /> ``` - `@keyup.enter.native="login"`：当用户在输入框中按下回车键时，触发 `login` 方法。 - `@keydown.native="onkeydown"`：当用户按下键盘上的任意键时，触发 `onkeydown` 方法。 - `@input="input"`：当用户在输入框中输入内容时，触发 `input` 方法。 - `placeholder="请输入密码"`：设置输入框的占位符文本为 "请输入密码"。 - `v-model="form.showPassword"`：将输入框的值与 Vue 实例中的 `form.showPassword` 双向绑定，即输入框中的内容会同步更新到 `form.showPassword`，反之亦然。 这段代码展示了一个基本的输入框的用法，通过监听键盘事件和输入事件，并将输入框的值与 Vue 实例中的数据进行双向绑定。同时，通过设置占位符文本提供了一些提示信息给用户。 请注意，这段代码是在使用 Element UI 组件库的前提下编写的，如果你在使用其他组件库或自定义组件，可能需要适当调整代码以匹配相应的组件和事件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值