VUE el-input 按键绑定Enter方法

最新推荐文章于 2024-06-21 16:11:15 发布
最新推荐文章于 2024-06-21 16:11:15 发布
阅读量4k 收藏 1
点赞数
分类专栏： VUE 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang156239305/article/details/106070313
版权 
      <el-form class="form-search" :inline="true" size="mini" :model="searchForm" ref="searchForm">
        <el-form-item label="用户名称">
          <el-input class="formItem"  type="text" @keyup.enter.native="searchEntInfo" v-model="searchForm.UserName"  placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item class="form-deal" >
          <el-button type="warning" size="mini" @click="searchEntInfo()">查&nbsp;&nbsp;询</el-button>
          <el-button type="danger" size="mini" @click="resetFormAndLoad('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>

@keyup.enter.native="searchEntInfo" 绑定@click="searchEntInfo()查询方法

金戈_旭日东升
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部
weixin_44817062的博客
08-16 2164
el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部 一、el-input 按键绑定Enter方法 给enter键绑定@click="searchEntInfo()查询方法 @keyup.enter.native="searchEntInfo" 二、@click.native中 .native 的含义与使用 .native：侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际
el-input 回车事件keydown刷新页面（白屏）
最新发布
vue+iview 动态渲染表格（vue.js结合iview插件）
06-21 401
【代码】el-input 回车事件keydown刷新页面（白屏）
vue el-input绑定enter按键
wangyuntuan的专栏
01-20 968
vue el-input绑定enter按键
Vue element el-input输入框 实现 ’空格+enter’组合键：换行，enter：发送，使用keydown和keyup键盘事件来实现
蓝胖子的博客
07-20 4277
Vue element el-input输入框 实现 ’空格+enter’组合键：换行，enter：发送，使用keydown和keyup键盘事件来实现
vue el-input 使用 回车键会刷新页面的问题
Greenhand_BN的博客
04-12 4818
场景： vue项目中 在输入框输入字符并按下回车键搜索时，不会进行搜索， 而是会刷新页面 原因： 当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 解决： 如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了， @submit: 表单提交 .native 绑定系统原生事件 .prevent 提交以后不刷新页面 <el-form :model="goodsListTab.queryParams
vue中el-input绑定键盘按键(按键修饰符)
11-20
在这里，`@keyup.enter.native`确保了`query`方法会在用户按下回车键时被调用。 Vue还提供了一系列其他常用的按键修饰符，如`.delete`(或`.8`、`.46`)用于监听删除或退格键，`.tab`(或`.9`)用于监听制表键，`.esc`...
vue监听input标签的value值方法
10-18
当用户在`input`框中输入内容时，`@input`会触发绑定的`search`方法，并将当前事件对象传递给该方法： ```html <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> ``` 在`...
vue的事件绑定与方法详解
12-09
在Vue中，事件绑定和方法的使用是核心功能之一，使得数据交互和UI控制变得简单易行。以下是关于Vue事件绑定与方法的详细解释： 一、事件绑定 Vue 使用 `v-on` 指令来绑定事件监听器。例如，若要绑定一个点击事件，...
Vue数字输入框组件使用方法详解
11-20
在数字输入框组件中，我们创建了一个包含输入框和两个按钮的布局，按钮绑定了`handleDown`和`handleUp`方法，分别处理数值的减少和增加。 8. **组件方法（Component Methods）**： - `handleDown`和`handleUp`是...
vue使用element-ui的el-input监听不了回车事件解决
love_parents的博客
08-22 919
vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的： &amp;lt;el-input v-model=&quot;form.loginName&quot; placeholder=&quot;账号&quot; @keyup.enter=&quot;doLogin&quot;&amp;gt;&amp
vue 实现动态表单，点击新增 增加一行输入框
m0_46693606的博客
04-27 8507
功能说明 存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行 动态表单部分 <el-form :model="dictMaintainForm" ref="dictMaintainFormRef" :rules="dictMaintainFormRules" label-width="100px" class="demo-ruleForm" >
vue中el-input回车事件刷新页面
h_未来可期_的博客
12-31 1834
需求 在页面中，输入框中输入内容以后，回车查询下面的数据 方案 使用input的回车事件 => @keyup.enter.native="” 问题 页面中点击回车以后，会刷新页面，并且路由中加了一个？ 解决方案 查证后得知，form表单中，如果只有一个input框的话，回车的时候默认提交了表单，导致刷新了页面 方案1 添加一个其他的input，但是不显示出来 vue的话不能使用v-if修饰，v-if还是会出问题，必须使用v-show <el-form ref="searchFom"
vue给表单添加enter回车事件
LLL_liuhui的博客
12-10 1831
@keyup.enter.native="login()" @keyup监听键盘事件 .enter为vue定义的按键码的别名 .native覆盖原有的keyup事件 <el-input type="password" v-model="ruleForm.password" :placeho...
Vue中使用Element 表单点击按钮实现增行删行操作
吃黄瓜不蘸酱的博客
02-09 1844
Vue中使用Element 表单点击按钮实现增行删行操作
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
fangqi20170515的博客
11-21 5318
由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。
(vue)输入框中按enter键实现搜索或表单提交
nyf_unknow的博客
06-06 2243
(vue)输入框中按enter键实现搜索或表单提交
vue绑定回车事件
weixin_64314100的博客
11-15 681
要绑定回车事件，你需要使用JavaScript编写代码。来获取按下的键的键码，如果键码是13，则表示按下了回车键。你可以在这个条件下添加你想要执行的代码。事件来监听输入框的键盘按下事件。当按下键盘上的任何一个键时，以上只是一个简单的例子，你可以根据自己的需求进行修改和扩展。在上面的例子中，我们使用了。
Vue3 的 回车（enter）事件
News777的博客
09-02 9314
Vue3 的 回车（enter）事件
vue3 el-input回车事件不进
05-01
处理Vue3的el-input回车事件时，需要使用Vue3提供的新语法。首先，需要使用 ref 参考输入元素，然后在输入元素上使用 @keydown.enter 属性来监听回车事件并调用相应的方法。具体地，可以按照以下步骤实现： 1. 在模板中，将el-input的ref绑定到Vue实例上，例如： ``` <el-input ref="input" placeholder="请输入内容" v-model="content" @keydown.enter="onEnter"></el-input> ``` 2. 在Vue实例中使用 ref 获取el-input元素的引用，例如： ``` setup() { const inputRef = ref(null); const content = ref(""); const onEnter = () => { console.log("Enter key pressed!"); }; onMounted(() => { inputRef.value.focus(); }); return { inputRef, content, onEnter }; } ``` 3. 在回车事件中使用 console.log() 等方法做出相应的处理， 例如： ``` const onEnter = () => { console.log("Enter key pressed!"); // 处理回车事件 }; ``` 4. 最后，在el-input元素中绑定ref属性，并在onMounted()生命周期中调用inputRef.focus() 来聚焦输入框， 例如： ``` <el-input ref="input" placeholder="请输入内容" v-model="content" @keydown.enter="onEnter"></el-input> export default { setup() { const inputRef = ref(null); const content = ref(""); const onEnter = () => { console.log("Enter key pressed!"); // 处理回车事件 }; onMounted(() => { inputRef.value.focus(); }); return { inputRef, content, onEnter }; } }; ``` 通过以上方法，即可成功处理Vue3 el-input回车事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值