uniapp 多个input框输入完成后自动跳转下一个，删除内容后回退到上一个

最新推荐文章于 2024-10-08 11:19:55 发布

原创

最新推荐文章于 2024-10-08 11:19:55 发布 · 6.6k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #vue.js

本文介绍了如何使用Uniapp开发一个输入框，实现实时号码匹配，支持多输入框联动与删除操作的高效流程。通过监听input和keyup.delete事件，实现了内容输入与回退功能。

项目是用于精准输入号码去做匹配的，在uniapp里多个input框输入完成后自动跳转下一个，删除内容后回退到上一个

话不多说，上代码看吧

模板部分代码：

<view class="phone-num-input-box u-flex u-row-between">
	<input type="number" class="phone-num-input" :disabled="index==0" :class="{'u-m-l-10': index==3||index==7}" maxlength="1" v-model="phone_num[index]"
	 v-for="(item,index) in phone_num" :key="index" :id="'input-'+ index" :focus="focus_index == index"
	 autocomplete="off" autocapitalize="off" autocorrect="off" @keyup.delete="funDeletePhoneNum"
	 @input="funInputPhoneNum" @focus="funFocusInput">
</view>

data部分代码：

focus_index: -1,
phone_num: {0:'1', 1:'', 2:'', 3:'', 4:'', 5:'',6: '', 7:'', 8:'', 9:'', 10:''},

methods部分代码：

funInputPhoneNum

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aa820t

关注关注

10
点赞
踩
34

收藏

觉得还不错? 一键收藏
9
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Uniapp 表单输入防抖：解决 input 输入时频繁触发接口请求的问题

xkxnq的专栏

09-06

339

在 Uniapp 中实现输入框防抖功能，可以有效减少频繁触发接口请求的问题。

Vue自定义指令——6位验证码input实现自动跳转焦点和退格删除

rumm

09-26

1708

6位数验证码乍看之下还挺简单的，看了网上很多代码基本一个个试过一遍。基于看不懂逻辑和语法，大多都不成功，最后花了2天时间才琢磨出。一开始搜资料的时候，大部分是jquery的，不方便用在vue框架里。最主要的问题是vue好像不支持直接使用keycode。经过指点才知道可以用自定义指令。于是乎，下面就是我的解决方案。 vue <div class="codeInput"> &...

9 条评论您还未登录，请先登录后发表或查看评论

uniapp 多个input输入完成自动切换到下一个输入框

YYYY77777的博客

04-26

3535

【代码】uniapp 多个input输入完成自动切换到下一个输入框。

uniapp实现输入框输入完成后自动下一个

XL984507092的博客

10-08

659

【代码】uniapp实现输入框输入完成后自动下一个。

uni-app 实现表单项“下一项”

qq_42339350的博客

07-12

507

关键 confirm-type @confirm 参考地址 uni-app 实现表单项“下一项” 里面的moveNext方法修改下 //焦点移动 moveNext(dom){ this.focusList={ ...this.focusList, [dom]:true, } },

[微信小程序]提交表单返回成功后自动清空表单的值

qq_41241504的博客

11-13

2426

实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: <form bindsubmit='formsubmit'> <view> <span>* </span>公司名称:</view> <input name=...

uniapp 页面点击事件

qq_36016297的博客

03-29

1万+

以上是在页面中绑定点击事件的几种方法，可以根据实际情况选择使用。指令来绑定一个事件。在指令的参数中，指定要绑定的事件类型，例如。中，可以为任何一个标签添加点击事件。方法会被调用，并输出一条日志信息。方法会被调用，并输出一条日志信息。事件，当用户点击这个标签时，事件，当用户点击这个标签时，在这个例子中，我们为一个。在这个例子中，我们为一个。语法糖来绑定事件，其中。可以在任何标签上使用。

用vue3和uniapp制作小程序车牌号输入键盘，要求取消挂车车牌号输入功能

最新发布

08-19

删除功能：键盘上需要有一个删除键，删除当前输入框的内容，并回退到上一个输入框。 11. 完成输入：可以提供一个“完成”按钮，用于关闭键盘。 12. 由于在小程序中，我们需要考虑性能，所以使用`<view>`和`...

uniapp入门超详细教程：如何从零开始搭建项目

weixin_51609337的博客

07-19

2万+

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。

移动端H5常见问题

娃哈哈_的博客

12-28

1329

1、click事件，a href无效在APP中无效：场景：H5中绑定了click事件进行页面跳转，微信浏览器，手机内置浏览器测试没问题。内嵌到某APP中，点击事件无效，通过a标签href跳转也无效（IOS无效，安卓有效）解决方法：将click事件换成touchend事件进行跳转页面。 2、swipe组件，上滑翻页，在移动端真机环境中有闪白屏情况场景：做一个活动H5页面，有上滑翻页效果。用到了swipe组件，在微信开发者平台中测试没问题。到真机上，一滑屏翻到下一页，就有闪屏效果，出现频率很高。解决方

uni-app怎么自动跳到下一个input_一个软件测试案例实战：Excel + Python自制带UI的金融小工具...

weixin_40009207的博客

12-12

1087

Fintech概念正受到不少互联网金融公司的热捧，主要是指代那些可用于撕裂传统金融服务方式的高新技术。越来越多的企业开辟了新的部门去研究各种各样能让自己产品增值的科技类产品。尤其是在很多互联网金融公司，业务分析师BA(Business Analyst)，又称产品经理受到大家的追捧，虽然身处西二旗等ITer聚集地，但是他们做的工作与金融街上的白领们并无不同，他们是无所不懂的金融达人，顶着各个海外名校...

在uniapp中实现按钮点击次数的埋点功能

qq_44866810的博客

05-09

3818

埋点介绍、实现过程步骤以及在uniapp中实现按钮点击次数的埋点功能

汇编语言随笔（10）-内中断及实验12（返回到dos的中断处理程序）

Little_ant_的博客

09-02

1213

内中断的机制，以及返回到dos的中断处理程序编写

uniapp中的input，输入input回车事件和输入input事件

热门推荐

m0_61169066的博客

03-28

2万+

<input class="inputclass font28" v-model="inputvalue" @input="input" placeholder="搜索" placeholder-class="color999 " confirm-type="search" @confirm="doSearch"/> data定义 //搜索框 inputvalue:'', methods方法 //当键盘输入时，触发input事件， .

uniapp app打包提交清空数据清空不掉的

weixin_45631278的博客

06-17

1313

uniapp app清空数据清不掉

uniapp-表单提交后请清空表单

陈小白

12-10

1万+

第一种通过v-model=""的动态清空 <form @submit="formSubmit" > <view> <input type="text" value="" v-model="test" name="test" /> <button form-type="submit">Submit<...

多个input框输完后鼠标光标后移删除自动前移

mengfanyue123的博客

10-12

861

import React, { useEffect, useState } from '@alipay/bigfish/react'; import { Button, Checkbox, Input, Tooltip, Form } from '@alipay/bigfish/antd'; import { DesktopOutlined, MobileOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import styles fr

uni-app及vue开发循环创建的input框，value改变一个都随之改变的问题？

海贼王某人的博客

04-20

4137

完美解决办法，直接上案例！数组： var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a); // a变成了[1,2,3,4] 对象： var obj = {a:10}; var obj2 = obj; obj2.a = 20; // obj2.a改变了， alert(obj.a); // 20，obj的a跟着改变循环创建的...

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

qq_28568547的博客

09-10

1726

1.实现效果 2.小二，上酒菜（代码） <template> <view class="container"> <image class="logo" src="../../static/images/logo.jpg" /> <view class="info">hello! 小可爱</view> <view class="input-list"> <input type="text" class="bor

uniapp vue3输入框输入完毕后自动跳到下一个输入框怎么实现

04-18

对于你的问题，我可以提供以下建议：您可以使用v-model指令来监听输入框内容的变化，然后在输入框的input事件中使用$refs属性来获取下一个输入框，并将焦点聚焦到下一个输入框上。具体实现可以参考以下代码： ``` <template> <div> <input v-model="input1" @input="handleInput(1)"> <input ref="input2"> </div> </template> <script> export default { data() { return { input1: '' } }, methods: { handleInput(index) { if (this.input1.length >= 4) { this.$refs['input' + (index + 1)].focus(); } } } } </script> ``` 当输入框一的内容长度达到4个字符时，就会自动跳转到输入框二，你可以根据实际情况修改这个阈值。希望这能对您有所帮助！