vue,用enter回车键替代tab键的切换功能

最新推荐文章于 2025-03-07 17:52:04 发布

羽-37895683

最新推荐文章于 2025-03-07 17:52:04 发布

阅读量1.3k

点赞数 11

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_37895683/article/details/136394831

版权

文章介绍了如何在Vue项目中，利用antV和ElementUI组件，通过自定义函数`initInputDOM`和`nextFocus`/`tableRowNextFocus`，实现在表单中按回车键自动切换到下一个输入框的功能，适用于类似`<a-input-number>`的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户需求，需要用回车键替代tab键切换输入下一个文本框。

是在vue项目中使用的，使用的input的antV的，可以自己改改，同样适用于element

封装了一个js文件

let domsLists = {};
/**
 * 根据listClassName初始化dom列表
 * @param {*} listClassName
 */
export function initInputDOM(listClassName) {
  const domsParent = document.querySelectorAll(
    '.' + listClassName + ' .ant-input,.' + listClassName + ' .ant-input-number-input'
  );
  domsLists[listClassName] = [];

  domsParent.forEach((item, index) => {
    // if (item.className === 'ant-input') {
    if (item.className.indexOf('disabled') === -1 && item.className.indexOf('calendar') === -1 && item.getAttribute('disabled') !== 'disabled') {
      domsLists[listClassName].push(item)
    }
  });
  domsLists[listClassName].forEach((item, index) => {
    item.setAttribute('data-index', index);
  });

  // console.log(domsParent);
  // console.log(domsLists);
  // debugger
}
/**
 * 父元素内回车下一个input
 * @param {*} listClassName 同一组父元素的classname
 * @param {*} event
 */
export function nextFocus(listClassName, event) {
  event.preventDefault() // 阻止a-textarea默认行为（换行）
  const index = event.target.getAttribute('data-index');
  const nextIndex = parseInt(index) + 1;
  const length = domsLists[listClassName].length;
  if (nextIndex < length) {
    domsLists[listClassName][nextIndex].focus();
  } else {
    domsLists[listClassName][0].focus();
  }
}

/**
 * 表格一列内回车下一个input
 * @param {*} listClassName 同一行input的classname
 * @param {*} event
 */
export function tableRowNextFocus(listClassName, event) {
  event.preventDefault() // 阻止a-textarea默认行为（换行）
  // if(domsLists.hasOwnProperty(listClassName)){
  // }
  const domsParent = document.querySelectorAll(
    '.' + listClassName + '.ant-input,.' + listClassName + '.ant-input-number-input'
  );
  domsLists[listClassName] = [];

  domsParent.forEach((item, index) => {
    // if (item.className === 'ant-input') {
    if (item.className.indexOf('disabled') === -1 && item.className.indexOf('calendar') === -1) {
      domsLists[listClassName].push(item)
    }
  });
  domsLists[listClassName].forEach((item, index) => {
    item.setAttribute('data-index', index);
  });
  // console.log(domsParent);
  // console.log(domsLists);
  // debugger

  const index = event.target.getAttribute('data-index');
  const nextIndex = parseInt(index) + 1;
  const length = domsLists[listClassName].length;
  if (nextIndex < length) {
    domsLists[listClassName][nextIndex].focus();
  } else {
    domsLists[listClassName][0].focus();
  }
}

/**
 * 清理dom
 */
export function clearDomList() {
  domsLists = {}
}

html/vue代码，注意需要给父元素取个类名，

                  <a-card title="生育史" class="pat-info-for-enter">
                    <a-form-model
                      ref="menstrChildHisForm"
                      layout="inline"
                      :model="menstrChildHisForm"
                      :label-col="{span: 11}"
                      :wrapper-col="{span: 13}">
                      <a-row>
                        <a-col :span="4">
                          <a-form-model-item label="子女人数">
                            <a-input-number
                              v-model.trim="menstrChildHisForm.existChild"
                              style="width: 100%"
                              :min="0"
                              placeholder="请输入子女人数"
                              @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number>
                          </a-form-model-item>
                        </a-col>
                        <template v-if="isWoman">
                          <a-col :span="4">
                            <a-form-model-item label="流产次数" prop="abortion"> <a-input-number
                              v-model.trim="menstrChildHisForm.abortion"
                              style="width: 100%"
                              :min="0"
                              placeholder="请输入流产次数"
                              @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                          </a-col>
                          <a-col :span="4">
                            <a-form-model-item label="早产次数" prop="prematureBirth"> <a-input-number
                              v-model.trim="menstrChildHisForm.prematureBirth"
                              style="width: 100%"
                              :min="0"
                              placeholder="请输入早产次数"
                              @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                          </a-col>
                          <a-col :span="4">
                            <a-form-model-item label="死产次数" prop="stillborn"> <a-input-number
                              v-model.trim="menstrChildHisForm.stillborn"
                              style="width: 100%"
                              :min="0"
                              placeholder="请输入死产次数"
                              @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                          </a-col>
                          <a-col :span="4">
                            <a-form-model-item label="异常胎" prop="abnormalFetus">
                              <a-input
                                v-model.trim="menstrChildHisForm.abnormalFetus"
                                placeholder="请输入异常胎"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input>
                            </a-form-model-item>
                          </a-col>
                          <template v-if="editPersonInfo.isRadiation === 1">
                            <a-col :span="4">
                              <a-form-model-item label="孕次">
                                <a-input v-model.trim="menstrChildHisForm.pregnancyTimes" @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)" />
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="活产次数"> <a-input-number
                                v-model.trim="menstrChildHisForm.bornAlive"
                                style="width: 100%"
                                :min="0"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="畸胎次数" prop="innateMalformation"> <a-input-number
                                v-model.trim="menstrChildHisForm.innateMalformation"
                                style="width: 100%"
                                :min="0"
                                placeholder="请输入畸胎次数"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="多胎次数"> <a-input-number
                                v-model.trim="menstrChildHisForm.multipleBirth"
                                style="width: 100%"
                                :min="0"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="异位妊娠次数"> <a-input-number
                                v-model.trim="menstrChildHisForm.ectopicPregnancy"
                                style="width: 100%"
                                :min="0"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number></a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="不孕不育原因"> <a-input
                                v-model.trim="menstrChildHisForm.infertilityCause"
                                style="width: 100%"
                                @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input></a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="现有男孩数">
                                <a-input-number
                                  v-model.trim="menstrChildHisForm.existBoy"
                                  style="width: 100%"
                                  :min="0"
                                  @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number>
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="男孩出生日期">
                                <a-date-picker
                                  v-model="menstrChildHisForm.boyBornDate"
                                  format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD" />
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="现有女孩数">
                                <a-input-number
                                  v-model.trim="menstrChildHisForm.existGirl"
                                  style="width: 100%"
                                  :min="0"
                                  @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)"> </a-input-number>
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="4">
                              <a-form-model-item label="女孩出生日期">
                                <a-date-picker
                                  v-model="menstrChildHisForm.girlBornDate"
                                  format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD" />
                              </a-form-model-item>
                            </a-col>
                          </template>
                        </template>
                        <a-col :span="4">
                          <a-form-model-item label="子女健康状况">
                            <a-input
                              v-model="menstrChildHisForm.childHealth"
                              :max-length="250"
                              @change="e => sizeChange(e.target.value, 250)"
                              @keydown.enter.native="nextFocusOut('pat-info-for-enter',$event)" />
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </a-form-model>
                  </a-card>

import { initInputDOM, nextFocus, tableRowNextFocus, clearDomList } from '@/utils/enter2Tab.js'

mouted(){
   initInputDOM('pat-info-for-enter')
}


// 项目使用的是vue+ts，所以这么写，没用ts的直接使用nextFocus()方法就行
nextFocusOut(className:string, e:any) {
   nextFocus(className, e)
}