uni-app 实现类似验证码输入

Love The Way You Lie 2023-07-22 05:56 43阅读 0赞

先看效果

![2020040419311650.gif][]

四个文本框。当然想要更多可以自己再加，其实实现的思路很简单，废话不多说 贴代码（Value 这块因该都看得懂吧）

<input type="number" disabled @tap='onFocus' value="{
       {iptValue.length>=1?iptValue[0]:''}}"/>
    <input type="number" disabled @tap='onFocus' value="{
       {iptValue.length>=2?iptValue[1]:''}}"/>
    <input type="number" disabled @tap='onFocus' value="{
       {iptValue.length>=3?iptValue[2]:''}}"/>
    <input type="number" disabled @tap='onFocus' value="{
       {iptValue.length>=4?iptValue[3]:''}}"/>

这里我创建了四个文本框 并且给他们注册点击事件 以及值绑定 重点 是禁用，重点：记得延时赋值

<script>
    	export default {
    		data() {
    			return {
    				iptValue: "",
    				isFocus: false
    			}
    		},
    		methods: {
    			  onFocus: function (e) {
    			     var self = this;
    			      self.isFocus=true;
    			   },
    			   setValue: function (event) {//文本框输入事件
    				 var self = this;
    			     var value = event.target.value;
    				 setTimeout(function(){self.iptValue = value;},5); //重点
    				 
    			   }
    		}
    	}
    </script>

重点来了，在页面上添加一个 input 宽高都设置为0（也就是隐藏了）然后给他一个焦点事件，也就是 点击上面四个文本框让真正的焦点落到这个文本框上从而弹出键盘

<input  type="number" class='hidden_ipt' maxlength="{
       {4}}"  focus="{
       {isFocus}}" @input="setValue"></input>

思路就是这样

[2020040419311650.gif]: /images/20230528/fdeda02b586444e8bb66f5902c535555.png

发表评论取消回复

表情：

评论列表（有 0 条评论，43人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记52 输入手机号页面和输入验证码页面

UNIAPP实战项目笔记52 输入手机号页面和输入验证码页面实际案例图片 > 输入手机号页面 ![219183d331304e7cb29adafa7be6ed2

╰+哭是因爲堅強的太久メ/ 2024年03月30日 09:45/ 0 赞/ 131 阅读

相关验证码实现

具体实现 import lombok.extern.slf4j.Slf4j; import java.util.Base64; import javax.imag

怼烎@/ 2024年03月16日 20:07/ 0 赞/ 184 阅读

相关 Android验证码输入框PinEntryEditText

![format_png][] 大神GitHub地址：[https://github.com/alphamu/PinEntryEditText][https_github.

ゞ浴缸里的玫瑰/ 2023年08月17日 16:48/ 0 赞/ 188 阅读

相关 uni-app 实现类似验证码输入

先看效果 ![2020040419311650.gif][] 四个文本框。当然想要更多可以自己再加，其实实现的思路很简单，废话不多说贴代码（Value 这块因该都看得懂吧

Love The Way You Lie/ 2023年07月22日 05:56/ 0 赞/ 44 阅读

相关 ionic + angular 验证码输入组件

Code/pincode input component for angular [https://github.com/AlexMiniApps/angular-cod

小灰灰/ 2023年02月19日 14:25/ 0 赞/ 177 阅读

相关 uniapp实现获取验证码倒计时

获取验证码倒计时 <view class="getNum" @click="getNum" v-show="numShow"> 获取验证码

╰半夏微凉°/ 2022年11月24日 11:21/ 0 赞/ 327 阅读

相关防机器登录验证码的实现与输入匹配验证

代码： login.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"

迈不过友情╰/ 2022年06月13日 14:40/ 0 赞/ 285 阅读

相关输入框输入验证码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

浅浅的花香味﹌/ 2021年11月29日 15:54/ 0 赞/ 595 阅读

相关 uniapp获取手机验证码组件

<template> <view> <page-head :title="title"></page-head> <!-- 示例1 -

待我称王封你为后i/ 2021年09月17日 23:30/ 0 赞/ 964 阅读

相关 java实现空心验证码_Java实现验证码

public void getYZM(HttpServletRequest request, HttpServletResponse response)\{ //验证码图片宽

布满荆棘的人生/ 2021年09月07日 06:13/ 0 赞/ 707 阅读