ElementUI输入框(input)回车查询事件,详细讲解。

已于 2023-09-26 08:44:23 修改
阅读量1.1w 收藏 13
点赞数 10
文章标签： elementui vue.js vue 前端框架 html
于 2022-04-28 16:01:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51930729/article/details/124475058
版权

重要的事情说三遍: 简单 易懂 好用! 直接上代码(参考官方文档组件属性)

<el-input @keyup.enter.native="UserSelect"  placeholder="请输入用户名称">
下面进行拆分讲解:

完整: @keyup.enter.native

@keyup    译: 触发键盘事件
enter     译: 键盘回车提交
native    译:事件监听(个人理解)

总结(个人理解): 首先需求是在输入框内输入内容后敲下回车键位执行查询操作
那么我们要先去触发(@keyup)键盘上的回车键(enter)然后去监听(native)敲下回车的一刻
按这个逻辑那么也就组成了@keyup.enter.native,可能在大佬面前显得不太专业,
但是够让刚入门的朋友更好的去理解使用来完成相关功能的实现!(温馨提示:多参考官方文档给的组件属性😀)
本文章内容均为个人编写共大家学习参考，若搬运请标明出处！
小李的编程笔记
关注
  • 10
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现input输入框实时输入触发事件代码
12-04
代码如下: <input id=”productName” name=”productName” class=”wid10″ type=”text” value=”” /> 代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {searchProductClassbyName();}); 代码如下: searchProductClassbyName 为触发后调用的方法； 实现效果：
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
element-ui 输入框键盘回车事件导致页面刷新
最新发布
s_156的博客
07-02 100
W3C标准的说法是：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。例如：<el-input placeholder=“输入号码回车即可呼叫” v-model=“num” @keyup.enter.native=“callOut”>现在这个form里只有一个input，你回车,它竟然没有触发事件，而是刷新页面了，而且放两个input就没问题了，element-ui提供了输入框的键盘事件：@keyup.enter.native=“callOut”
element ui中的el-input回车键事件
热门推荐
u010613970的博客
07-26 1万+
今天项目里面的登录页面，需要按键盘回车键就直接登录，但是测试的时候，按了回车键后，直接刷新页面了，这不是我想要的，之后网上查了一下。上面的写法没问题，但是这样又会出现一个问题，当form表单中只有一个input框时，按回车键，页面还是刷新的。解决文案就是给form加一个@submit.native.prevent就可以阻止表单默认的提交行为。之后再查了一下，原来form表单只有一个Input框时，回车键默认为表单提交的事件。...
input框触发回车事件
anwei9164的博客
08-26 1487
window.event只能在IE下运行，不能在firefox下运行,这是因为firefox的event只能在事件发生的现场使用。 在firefox里直接调用event对象会报undefined。兼容解决方式： 1 <input type="text" onkeydown="keyup_submit(event);"> 2 3 <script&gt...
elementUI中input框添加回车事件
weixin_30879169的博客
08-20 942
<el-input placeholder="审批人" v-model="searchKeyword" class="w_272" @keyup.enter="search" > 　　这样写不生效需要改成如下 @keyup.enter.native = 'search' 　　 转载于:https://www.cnblogs.com/t...
vue2中ElementUI输入框，使用enter回车键搜索或提交
weixin_45750721的博客
03-31 2516
vue2中ElementUI输入框，使用enter回车键搜索或提交
elementUI 设置input的只读或禁用的方法
01-21
PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...
ElementUI input输入、button enter回车事件
Cheung1992的博客
10-11 5907
1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件
Vue ElementUI Input输入框 回车事件
深度
01-28 630
@keyup.enter.native="hello"
Element 输入框input响应回车事件
s_156的博客
02-22 1596
Element 输入框input响应回车事件
elementUI 输入框按回车刷新页面分析与解决
先知三日
06-29 2055
注意：如果你发现@keydown.enter.prevent在Element UI的组件中不起作用，那可能是因为组件内部实际上是一个包装了原生的组件，所以你需要使用.native修饰符来监听原生的keydown事件。而当你使用@keydown.enter.native.prevent时，你是在按键被按下的那一刻阻止了默认的表单提交行为，所以它能够有效地阻止表单的提交。在阻止表单提交的情况下，通常使用@keydown.enter更为有效。
element-ui input 组件 回车事件
07-04 388
直接在el-input 标签上添加@keyup.enter="funName" 是不起作用的，在组件中使用需要加上.native。 <el-input v-model = "value"@keyup.enter.native="funName"></el-input> 转载于:https://www.cnblogs.com/toyNotes...
elementUI中输入框回车事件
PP_zi的博客
03-22 462
<el-input placeholder="请输入IP或连接地址进行搜索" v-model="queryInfo.query" @keyup.enter.native="getHttpLogData()" > 给 @keyup.enter.native绑定函数即可。
elementui中input输入框添加回车事件
Misnice的博客
02-25 970
<el-input v-model="name" placeholder="请输入活动名称" @keyup.enter.native="handleActivityChange" /> handleActivityChange是点击回车执行的函数
element-ui input输入框回车事件
weixin_30896825的博客
12-18 250
<el-input maxlength="30" v-model="answerInput" @keyup.enter.native="addAnswer" placeholder="请输入问题备选答案" /> ​ 转载于:https://www.cnblogs.com/calamus/p/10136571.html...
#vue#使用Element输入框，使用enter回车键搜索或提交
ZHENGCHUNJUN的博客
10-15 6832
#vue#使用Element输入框，使用enter回车键搜索或提交
elementui input框回车事件
07-28
ElementUI 的 Input 组件是基于 Vue.js 的组件库，它提供了一个方便的方法来监听输入框的回车事件。 要监听 Input 组件的回车事件，可以使用 `@keyup.enter` 或 `@keydown.enter` 事件。下面是一个示例： ```html <template> <div> <el-input v-model="inputValue" @keyup.enter="handleEnter"></el-input> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleEnter() { // 在这里处理回车事件 console.log('回车被按下'); } } }; </script> ``` 在上面的示例中，我们使用 `v-model` 指令将输入框的值与 `inputValue` 属性进行双向绑定。然后，在 `@keyup.enter` 事件中调用 `handleEnter` 方法来处理回车事件。 当用户在输入框中按下回车键时，`handleEnter` 方法将被调用，并在控制台输出 "回车被按下"。你可以根据需要在这个方法中执行其他操作，比如发送表单数据或执行搜索等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值