解决弹窗中form表单中按下tab键不切换的问题

ops/2025/2/21 10:01:10/

开发过程中碰到el-dialog中使用的form组件,按下键盘tab键不会切换到下一个,普通页面就正常切换。

解决办法

<ElInputref="newPWDInput"v-model="newPWD":clearable="true":maxlength="16":tabindex="2":type="passwordVisible ? 'text' : 'password'"oncopy="return false"oncut="return false"placeholder="设置新密码"@keydown.tab="handleTab($event, 'repeatPWDInput')"><!-- 省略其他代码 --></ElInput>
</ElFormItem>
<ElFormItem:prop="'repeatPWD'":rules="[{validator: validateRepeatPWD,trigger: ['blur'],},]"
><ElInputref="repeatPWDInput"v-model="repeatPWD":clearable="true":maxlength="16":tabindex="3"oncopy="return false"oncut="return false":type="rePasswordVisible ? 'text' : 'password'"placeholder="请再次输入密码"@keyup.enter="onConfirm"@keydown.tab="handleTab($event, 'newPWDInput')"><!-- 省略其他代码 --></ElInput>
<script setup lang="ts">
import { ref } from 'vue';
// 省略其他导入代码const newPWDInput = ref(null);
const repeatPWDInput = ref(null);const handleTab = (event, nextInputRef) => {event.preventDefault(); // 阻止默认的 Tab 键行为if (nextInputRef === 'newPWDInput') {newPWDInput.value.focus();} else if (nextInputRef === 'repeatPWDInput') {repeatPWDInput.value.focus();}
};// 省略其他代码
</script>

这样只适合input框少的时候解决办法,多的情况下就得考虑别的方案了。
大家有没有好的办法呢?


http://www.ppmy.cn/ops/160210.html

相关文章

基于Python的Diango旅游数据分析推荐系统设计与实现+毕业论文(15000字)

基于Python的Diango旅游数据分析推荐系系统设计与实现毕业论文指导搭建视频&#xff0c;带爬虫 配套论文1w5字 可定制到某个省份&#xff0c;加40 基于用户的协同过滤算法 有后台管理 2w多数据集 可配套指导搭建视频&#xff0c;加20 旅游数据分析推荐系统采用了Python语…

如何在 GitHub 中创建一个空目录 ?

GitHub 是开发人员必不可少的工具&#xff0c;它提供了存储、共享和协作代码的平台。一个常见的问题是如何在 GitHub 存储库中创建一个空目录或文件夹。GitHub 不支持直接创建空目录。但是&#xff0c;有一种解决方法是使用一个虚拟文件&#xff0c;通常是一个 .gitkeep 文件。…

八大排序算法(2)交换排序-冒泡排序 和 快速排序

快速排序&#xff08;Quick Sort&#xff09; 和 冒泡排序&#xff08;Bubble Sort&#xff09; 都是常见的交换排序算法&#xff0c;它们的核心思想都是通过交换元素来实现排序。但是&#xff0c;它们的工作原理和性能差异非常大。下面我们来详细对比这两种排序算法&#xff1…

前端新手如何从CtrlC+V开始?(前端开源UI平台汇总)

前言 如果你是个前端小白&#xff0c;面对一堆满屏的div标签和css就头晕眼花&#xff1f;别担心&#xff0c;咱都是从“代码搬运工” 开始的。当你的同桌还在和flex布局玩"你动我猜"的时候&#xff0c;你已经像拼乐高一样把现成的按钮组件搭成炫酷界面。这可不是作弊…

4.从零开始学会Vue--{{组件通信}}

1.组件的注意点 1.template只能有一个根元素 约束&#xff1a;.vue文件中的template中如果写了两个元素&#xff0c;则会报如下错误 解决&#xff1a;保证template中只有一个根元素即可 2.scoped解决样式冲突 1全局样式: 默认组件中的样式会作用到全局&#xff0c;任何一个组…

用deepseek学大模型04-模型可视化与数据可视化

deepseek.com: pytorch可视化工具 生成神经网络图 在 PyTorch 中&#xff0c;可视化神经网络结构的常用工具和方法有以下几种&#xff0c;以下将详细介绍它们的用法&#xff1a; 1. TensorBoard (PyTorch 官方集成) PyTorch 通过 torch.utils.tensorboard 支持 TensorBoard&a…

数据结构者

数据&#xff08;data&#xff09;&#xff1a;可被计算机接受处理的符号总称 数据元素&#xff08;data element&#xff09;&#xff1a;数据的基本单位&#xff0c;常作为一个整体进行考虑和处理 一个数据元素可以由若干个数据项&#xff08;data item&#xff09;组成 数…

ctfshow-ssti-web361-372-wp

初学建议 今天开始学习ssti&#xff0c;分享几篇文章&#xff0c;由易到难&#xff0c;初学者仔细看完&#xff0c;基本上可以上手了。 SSTI 注入 - Hello CTF //这篇一定要认真看&#xff0c;一定&#xff01;一定&#xff01;一定&#xff01; 1. SSTI&#xff08;模板注…