vue3中的回车键完成input的切换功能

最新推荐文章于 2024-08-08 11:03:53 发布

被object制裁

最新推荐文章于 2024-08-08 11:03:53 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 html vue.js

本文链接：https://blog.csdn.net/qq_53847322/article/details/129022118

前端专栏收录该内容

4 篇文章

订阅专栏

文章讲述了如何在多个输入框（由Vue.js的v-for动态渲染）中，通过监听键盘事件，当用户按下回车键时，利用nextElementSibling属性将焦点切换到下一个输入框。这种方法适用于同一层元素结构中。

目前我完成的好像是在不同的div中是实现不了的，因为我使用了nextElementSibling这个属性，如果你们有更好的全局实现的方法，不妨留在评论。

 <div class="data">
        <input
          class="input"
          placeholder="输入xxx"
        />
        <input
          v-for="i in arr"
          :key="i"
          class="input"
          :placeholder="i"
        />
</div>

.input {
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  width: 15rem;
  height: 2rem;
}


const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']

// 监听键盘事件 如果按键是回车键就执行函数 handleKeyup
document.onkeydown = function (e) {
  if (e.key === 'Enter') {
    handleKeyup(e.key)
  }
}
const handleKeyup = (e) => {
  if (e === 'Enter') {
    // activeElement属性获取当前获得焦点的元素
    const activeInput = document.activeElement
    // console.log(activeInput)
    // nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
    // nextElementSibling属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）（不包括文本节点、注释节点）
    let nextInput = activeInput.nextElementSibling
    // console.log(nextInput)
    nextInput && nextInput.focus()
  }
}