input按回车换行

最新推荐文章于 2022-11-22 21:36:15 发布

冷太阳a

最新推荐文章于 2022-11-22 21:36:15 发布

阅读量1.5k

点赞数

分类专栏： Vue 项目总结

本文链接：https://blog.csdn.net/A_9888/article/details/110873055

版权

项目总结同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Vue

45 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何在HTML页面中使用原生的input元素，结合JavaScript，实现在table内的input框之间通过按下回车键切换焦点的功能。用户要求按回车键时，焦点会从当前input跳转到下一个，当到达最后一个input时，焦点转到特定的textarea，并在满足条件时保存答案。

摘要由CSDN通过智能技术生成

需求描述：页面是table里面嵌入input,用户要求按回车去下一个input
在这里插入图片描述
之前由于用到elementUI的,用于改变许多类型，之后就自己用原生的input去实现
具体代码：

 <input
                      type="number"
                      :ref="`ipt` + index"
                      :class="`ipt` + index"
                      v-model="pLitem.newPoint"
                      @keyup="limitPoint(pLitem)"
                      @keyup.enter="
                        enterCallback(index, qsItem.pointList.length)
                      "
                      :name="index"
                      :min="0"
                    />

//js
   enterCallback(index, Plength) {
      if (index < Plength - 1) {
        let bq = '.ipt' + `${index + 1}`
        window.document.querySelector(bq).focus()
      } else {
        window.document.querySelector('.textarea').focus()
        if (this.pContent != '') {
          this.saveAnswer()
        }
      }
    },