当前位置: 首页 > news >正文

Vue实现多个input输入,光标自动聚焦到下一个input

遇到一个需求,需要实现和移动端短信输入一样,输入内容后,光标会进入下一个输入框

需要用到2个事件 
keydown事件发生在键盘的键被按下的时候

keyup 事件在按键被释放的时候触发

<template><div class="box"><el-form class="demo-ruleForm" ref="form" :model="form" :rules="rules"><el-form-item class="form-item" label="身高" prop="Height">// 此处为了做校验处理<el-input type="text" v-model="Height" v-show="false"></el-input><span v-for="(item,index) in HeightList" :key="index"><input type="text" v-model="item.val" class="border-input" maxlength="1" @keyup="nextFocu($event,index, 1)" @keydown="changeValue(index,$event)" /></span><span class="text">cm</span></el-form-item></el-form></div>
</template><script>
const form = {Height: '', // 身高Weight: '' // 体重
}
export default {data () {const validatePass = (rule, value, callback) => {if (value.length < 3) {callback(new Error('请输入'))} else if (isNaN(value)) {callback(new Error('请输入数字'))} else {if (value <= 99) {callback(new Error('小于99'));} else if (value >= 251) {callback(new Error('大于251'))} else {callback()}}}const validatePass2 = (rule, value, callback) => {console.log(value)if (value.length < 4) {callback(new Error('请输入'))} else if (isNaN(value)) {callback(new Error('请输入数字'))} else {if (value < '0200') {callback(new Error('不能以0开头'))} else if (value > '2000') {callback(new Error('不能大于2000'))} else {callback()}}}return {Height: '', // 身高Weight: '', // 体重form: { ...form },HeightList: [{val: ''},{val: ''},{val: ''}],WeightList: [{val: ''},{val: ''},{val: ''},{val: ''}],rules: {Height: [{ validator: validatePass, trigger: ['focus', 'blur', 'change'] },],Weight: [{ validator: validatePass2, trigger: ['focus', 'blur', 'change'] },]}}},methods: {// 下一个文本框nextFocu (el, index, type) {let list = this[type === 1 ? 'HeightList' : 'WeightList'];let field = type === 1 ? "Height" : "Weight";let val = list[index].val;var dom = document.getElementsByClassName(el.srcElement.className),currInput = dom[index],nextInput = dom[index + 1],lastInput = dom[index - 1];if (el.keyCode != 8) {//禁止输入非数字类型if (!val.replace(/\D/g, '')) {list[index].val = "";return}if (index < (list.length - 1)) {nextInput.focus();} else {currInput.blur();}} else {if (index != 0) {lastInput.focus();}}// 数据转成字符串this.form[field] = list.map(item => { return item.val }).join('')// 重新赋值this[field] = this.form[field]},/*当键盘按下的时候清空原有的数*/changeValue (index, el) {if (el.keyCode !== 32) {this.HeightList[index].val = "";}}}
}
</script><style lang="less" scoped>
.border-input {background: #ffffff;width: 24px;font-size: 24px;height: 24px;margin-left: 8px;text-align: center;border: 1px solid #ccc;border-radius: 4px;
}
.box {width: 400px;margin: 0 auto;border: 1px solid #ccc;
}
/deep/.el-form-item__content {text-align: right;
}
/deep/ .el-form-item__error {position: absolute;right: 20px;
}
</style>

相关文章:

Vue实现多个input输入,光标自动聚焦到下一个input

遇到一个需求&#xff0c;需要实现和移动端短信输入一样&#xff0c;输入内容后&#xff0c;光标会进入下一个输入框 需要用到2个事件 keydown事件发生在键盘的键被按下的时候 keyup 事件在按键被释放的时候触发 <template><div class"box"><el-fo…...

人工智能技术应用笔记(二):OpenAI SORA文生视频模型技术报告全文中英对照 (GPT4翻译+人工润色)

目录 Video generation models as world simulators&#xff08;视频生成模型作为世界模拟器&#xff09; Turning visual data into patches &#xff08;将视觉数据转换为图像块&#xff09; Video compression network &#xff08;视频压缩网络&#xff09; Spacetim…...

Linux-系统资源管理的命令

目录 查看CPU&#xff1a;more /proc/meminfo 查看内存数据&#xff1a;free -m / free -h 查看系统版本&#xff1a;more /etc/issue 查看操作系统的类型&#xff1a;uname -a 查看主机名称&#xff1a;hostname 查看磁盘空间&#xff1a;df -h 查看某个目录空间…...

Html的<figure><figcaption>标签

Html的<figure><figcaption>标签 示例一: <figure><figcaption>figcaption001, fig标题1 </figcaption><figcaption>figcaption002, fig标题2 </figcaption><div style"width:calc(100px*2); height:calc(100px*2); back…...

Selenium实现多页面切换

当使用 Selenium 进行自动化测试或爬取数据时&#xff0c;有时需要处理多个页面之间的切换。以下是一些可能需要多页面切换的情况&#xff1a; 1、打开新窗口/页面&#xff1a; 在当前页面上点击链接、按钮或执行某些操作时&#xff0c;可能会打开一个新的窗口或页面。此时&a…...

Electron实战之菜单与托盘

菜单、托盘是桌面端应用必备的功能之一&#xff0c;我们通常会在菜单上配置应用常用的&#xff1a;偏好设置、显示隐藏、打开文件等功能&#xff0c;在托盘内设置&#xff1a;退出、重启、帮助等辅助性功能&#xff0c;帮助用户方便快捷地控制应用的一些系统功能。系统托盘实际…...

【Java EE初阶十六】网络原理(一)

在网络原理中主要学习TCP/IP四层模型中的重点网络协议 1. 应用层 1.1 应用程序与协议 应用层是和程序员接触最密切的&#xff1b; 应用程序&#xff1a;在应用层这里&#xff0c;很多时候都是程序员自定义应用层协议&#xff08;步骤&#xff1a;1、根据需求&#xff0c;明确…...

51_蓝桥杯_led流水灯

一 原理图分析 二 三八译码器工作原理 三八译码器&#xff1a;3个输入控制8路互斥的低电平有效输出。 C B A 输出 0 0 0 Y0 0 0 1 Y1 0 1 0 Y2 0 1 1 Y3 1 0 0 Y4 1 0 1 Y5 1 1 0 Y6 1 1 1 Y7 三 锁存器工作原理 锁存器&#xff1a;当使…...

⭐北邮复试刷题589. N 叉树的前序遍历__DFS (力扣每日一题)

589. N 叉树的前序遍历 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 前序遍历 。 n 叉树 在输入中按层序遍历进行序列化表示&#xff0c;每组子节点由空值 null 分隔&#xff08;请参见示例&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [1,null,…...

php伪协议之phar

一.phar协议 用于将多个 PHP 文件、类、库、资源&#xff08;如图像、样式表&#xff09;等打包成一个单独的文件。这个归档文件可以像其他 PHP 文件一样被包含&#xff08;include&#xff09;或执行。PHAR 归档提供了一种方便的方式来分发和安装 PHP 应用程序和库&#xff0c…...

蓝桥杯电子类单片机提升三——NE555

目录 单片机资源数据包_2023 一、NE555和定时器工作模式 1.NE555的介绍 2.定时器的计数模式 二、NE555频率读取代码的实现 1.定时器0初始化 2.通过读取TH0和TL0来读取频率 3.通过中断读取频率 三、完整代码演示 通过读取TH0和TL0来读取频率 main.c 通过中断读取频…...

发掘GPT-4商业创新的潜力

GPT-4在商业创新方面的应用潜力巨大&#xff0c;它能够基于庞大的训练数据集和强大的语言生成能力&#xff0c;协助企业或个人用户在多个商业场景中推动创新&#xff1a; 市场分析与战略规划&#xff1a;GPT-4可以对历史数据、行业趋势、竞争对手信息进行深度分析&#xff0c;并…...

LeetCode42.接雨水(单调栈)

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 &#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,…...

黄东旭:“向量数据库”还是“向量搜索插件 + SQL 数据库”?丨我对 2024 年数据库发展趋势的思考

本文由 PingCAP 黄东旭撰写&#xff0c;讨论了数据库技术在 2023 年的快速变革&#xff0c;并对 2024 年的数据库发展趋势进行了预测。文章重点关注了 GenAI 时代对数据库的影响&#xff0c;提出了在数据库选择上的两种路径&#xff1a;“向量数据库”和“向量搜索插件 SQL 数…...

Spark编程实验五:Spark Structured Streaming编程

目录 一、目的与要求 二、实验内容 三、实验步骤 1、Syslog介绍 2、通过Socket传送Syslog到Spark 3、Syslog日志拆分为DateFrame 4、对Syslog进行查询 四、结果分析与实验体会 一、目的与要求 1、通过实验掌握Structured Streaming的基本编程方法&#xff1b; 2、掌握…...

【已解决】引发的异常: 0xC0000005: 读取位置 0xFFFFFFFFFFFFFFFF 时发生访问冲突。

这种问题产生一般都会手足无措&#xff0c;包括笔者&#xff0c;但是不要慌&#xff0c;这种问题一般都是内存泄漏引起的。例如读者要访问一个已经被析构或者释放的变量&#xff0c;当然访问不了&#xff0c;导致存在问题。这时候读者应该从哪里产生内存泄漏这方面进行考虑&…...

Python Flask高级编程之RESTFul API前后端分离(学习笔记)

Flask-RESTful是一个强大的Python库&#xff0c;用于构建RESTful APIs。它建立在Flask框架之上&#xff0c;提供了一套简单易用的工具&#xff0c;可以帮助你快速地创建API接口。Flask-RESTful遵循REST原则&#xff0c;支持常见的HTTP请求方法&#xff0c;如GET、POST、PUT和DE…...

Windows如何打开投影到此电脑

1.首先点开设置 找到系统 点击投影到此电脑&#xff0c;如果这3行都显示灰色说明没有开启。 2.如何开启投影到此电脑 ①回到设置&#xff0c;点击应用 ②点击可选应用 ③ 安装无线显示器 投影设置可以和我一样...

【BUG】段错误

1. 问题 8核工程&#xff0c;核4在运行了20分钟以上&#xff0c;发生了段错误。 [C66xx_4] A00x53 A10x53 A20x4 A30x167e A40x1600 A50x850e2e A60x845097 A70xbad9f5e0 A80x0 A90x33 A100x53535353 A110x0 A120x0 A130x0 A140x0 A150x0 A160x36312e35 A170x20 A180x844df0 …...

深入理解指针(3)

目录 一、 字符指针变量二、 数组指针变量1.数组指针变量是什么&#xff1f;2.数组指针变量怎么初始化? 三、 二维数组传参的本质四、 函数指针变量1. 函数指针变量的创建2.函数指针变量的使用3.typedef关键字 五、 函数指针数组六、 转移表 一、 字符指针变量 在指针的类型中…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...