vue 在input 内回车选中下一个input 自定义事件 directives

于 2021-10-28 14:10:59 发布
阅读量250 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyapeng_/article/details/121013228
版权
前端 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
vue
5 篇文章 0 订阅
订阅专栏
这段代码展示了如何使用JavaScript实现元素的选择与事件监听。它主要用于处理`input.pop-input.pop-input-default`类的元素，当用户按下回车键时，焦点会根据预设的顺序在这些输入元素间切换。如果存在`keyFocusTo`属性，则焦点会转移到指定的元素，否则，焦点将转移到下一个输入元素。这是一个前端开发中常见的键盘流控制技术。
摘要由CSDN通过智能技术生成

可以打印一下el.querySelectorAll(‘input.pop-input.pop-input-default’)选中的元素，组件库不同，元素上的属性名也不太一样

directives: {
        enterToNext: {
            inserted: function(el) {
                let inputs = el.querySelectorAll('input.pop-input.pop-input-default')
                // console.log(inputs)
                for (var i = 0; i < inputs.length; i++) {
                    // 绑定回写事件
                    inputs[i].setAttribute('keyFocusIndex', i)
                    inputs[i].addEventListener('keyup', ev => {
                        if (ev.keyCode === 13) {
                            let targetTo = ev.srcElement.getAttribute('keyFocusTo')
                            if (targetTo) {
                                this.$refs[targetTo].$el.focus()
                            } else {
                                var attrIndex = ev.srcElement.getAttribute('keyFocusIndex')
                                var ctlI = parseInt(attrIndex)
                                if (ctlI < inputs.length - 1) {
                                    inputs[ctlI + 1].focus()
                                }
                            }
                        }
                    })
                }
            },
        },
    },
zhaoyapeng_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input框事件，jQuery其他事件，自定义事件，事件冒泡，事件委托，节点操作
weixin_43167531的博客
01-14 1170
js事件的分类 事件的类型:有鼠标事件，键盘事件，HTML事件，变化事件 注意：js中的事件前面要加on （如：onclick onmouseover），但jquery中的事件不需要加on 如（ [图片上传失败…(image-39e6ec-1547189649195)] (“Element”).mouseover ） 鼠标事件:（最常用） click,dblclick,mousedown,mous...
vue使用element-ui的el-input监听不了回车事件的解决方法
01-21
原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。 解决 在事件后面...
vue 之自定义事件
u012919352的博客
10-11 256
事件名 推荐始终使用kebab-case的事件名，eg: my-event 自定义组件的v-model <base-checkbox v-model="lovingVue"></base-checkbox> demo解读： 首先，定义你自己的model，使用标签 model的prop定义绑定的内容checked，此处需要对应props接收的checked event定义...
Vue 自定义事件
小柒的前端之旅
06-02 882
前面的话 我们已经知道，从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种。归纳起来组件之间的关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。 自定义事件 当子组件需要向父组件传递数据时，就要用到自定义事件。v-on指令除了监听DOM事件外，还可以用于组件之间的自定义事件。 在JS的设计模式—观察者模式中有dispatchEvent和addEventL...
vue 官方文档 - 自定义事件
qq_39811414的博客
05-31 200
1. 自定义事件 官方文档自定义事件 1.1. 自定义组件的 v-model 首先，一个组件的 v-model 默认会利用一个名为 value 的 prop 接 input 的事件，如下所示： <!-- Son.vue --> <template> <input type="text" :value="value" @input="handleInput"/> </template> <script> export default { prop
62Vue - 自定义事件（使用自定义事件的表单输入组件）
阿甘兄
07-29 587
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model来进行数据双向绑定。牢记： <input v-model="something"> 仅仅是一个语法糖： <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时，它相当于下面的简写： &l...
Vue触发input选取文件点击事件操作
10-14
在Vue.js中，触发input元素的选取文件点击事件是一个常见的需求，这通常涉及到用户界面中的文件上传功能。在本文中，我们将深入探讨如何在Vue组件中实现这一操作，并结合示例代码进行详细解释。 首先，我们需要创建...
Vue组件之自定义事件的功能图解
08-28
在开始使用Vue组件自定义事件之前，我们需要初始化一个Vue项目。我们可以使用Webpack来初始化项目，命令如下： `vue init webpack myapp` 这将生成一个标准的Vue项目文件夹，包括了各种文件和文件夹。 二、组件...
vue-fake-input:自定义输入单个字符
04-12
每次输入一个字符 或...粘贴整个值 安装 npm install vue-fake-input 或者如果您更喜欢纱线 yarn add vue-fake-input 用法 全球的 您可以全局安装Vue Fake Input： import Vue from 'vue' ; import VueFakeInput ...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
- 对于`<input type="radio">`，`@change`事件在用户选中或取消选中单选按钮时触发。在示例中，`getInvoiceId`方法会在用户选择新的发票ID时被调用，这可能是为了保存用户的选取。 总结，Vue.js中的`v-for`结合`...
input回车问题
weixin_34044273的博客
06-27 145
今天有一个问题，就是input对象没有加任何事件自己回车导致跳到了404页面。处理的时候，并发现没找到回车事件的控制。 那么只有一种情况，就是自带的回车控制。 百度了一下，如下面博文里面的写法。我这边就直接给form加了个onkeydown="if(event.keyCode==13){return false;}"全禁掉了   参考博客： http://blog.csdn.net/ligang2...
Vue | 14 组件深入-自定义事件
LorneNote
12-04 533
内容提要: 事件名称命名注意事项 自定义组件v-model的不同用法 为组件绑定本地事件 .sync修饰符的用法 这页假定你已经阅读了组件基础Components Basics，如果你是组件新手请先阅读它。 事件名称 不像组件和props，事件名称不存在自动大小写转换。相反，事件被发出的名字必须与被监听的名字完全一致，例如，如果发送了一个 cameCased的事件名称： this.$e...
input的回车事件
Q_004的博客
09-02 1759
1,input使用回车,进入下一个输入框,最后完成确认按钮的点击 <input type="text" value={optItem.tScore} placeholder={'<=' + optItem.aScore} onChange={e => { var val= e.target.value; ...
input 回车事件
zha_w的博客
07-07 590
@keyup.enter 为input 添加回车事件 引用了 element的话 在@keyup.enter 后加 .native
input框的回车事件
qq_36122298的博客
06-15 4805
在开发的过程中我们经常会遇到给input框加回车事件 ，这其中有个比较奇葩的问题，当一个form表单中只有一个input框时，这时我们会发现，你给这个input框加回车事件，他其实不走你加的回车事件，而是默认提交form表单，即使你不给它加回车事件，按回车键它也是起作用的，默认提交表单，这种情况只针对form表单中只有一个input。 解决办法很简单 在form表单中
input 实现回车搜索
ZhengYanFeng1989的博客
06-26 5777
一：界面代码 <li class="search"> <ul> <li class="Search_text" style="float:right;background:#eee;margin-right:15px;padding-right:35px;height:25px;"> <input onk...
input框回车事件
xm的博客
08-07 2771
input框回车事件，有以下三种写法： http://yayihouse.com/yayishuwu/chapter/2241
input·触发回车事件
热门推荐
MtangEr的博客
08-19 1万+
1.普通的input <input type="text" onkeydown="keyup_submit(event);"> <script> function keyup_submit(e){ var evt = window.event || e; if (evt.keyCode == 13){ //回车事件 } } </script> 2.vue中使用的input <input type="text"
vue3 在input框上回车事件
最新发布
09-06
在Vue 3中，可以使用`@keyup.enter`指令来监听输入框的回车事件。 在模板中，可以在input标签上添加`@keyup.enter="handleEnter"`来监听回车事件，其中`handleEnter`是一个定义在methods中的方法。 例如： ```vue <template> <div> <input type="text" @keyup.enter="handleEnter" /> </div> </template> <script> export default { methods: { handleEnter() { // 处理回车事件的逻辑 console.log('回车事件触发'); } } } </script> ``` 当用户在输入框中按下回车键时，`handleEnter`方法会被触发，并执行相关的逻辑。你可以在`handleEnter`方法中处理输入框的值，或者执行其他的操作。 这样，就可以在Vue 3中监听输入框的回车事件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值