首页 > 编程语言 >直播商城源码,验证码 获取码输入框实现

直播商城源码,验证码 获取码输入框实现

时间:2023-11-30 14:11:06浏览次数:46  
标签:false focus 验证码 value detail 输入框 源码 input true

直播商城源码,验证码 获取码输入框实现

功能实现及原理

输入格-自动切换

实现对每个input输入框操作

利用定时器和标记

 

代码实现

 

/**
 * 输入框及光标
 */
const firstFocus = ref(true)
const secondFocus = ref(false)
const thirdFocus = ref(false)
const fourFocus = ref(false)
const fiveFocus = ref(false)
const sixFocus = ref(false)
//记录输入的值
const inputValue = ref<[any]>([-1])
function focus() {
    firstFocus.value = true;
}
// 第一个文本框 change 事件
function firstChange(e: any) {
    initialization();
    if (e.detail.keyCode == 8) {
        firstFocus.value = true
    } else {
        setTimeout(() => {
            secondFocus.value = true;
        }, 100)
    }
    inputValue.value.push(e.detail)
}
// 第二个文本框 change 事件
function secondChange(e: any) {
    initialization();
    if (e.detail.keyCode == 8) {
        firstFocus.value = true
    } else {
        setTimeout(() => {
            thirdFocus.value = true;
        }, 100)
    }
    inputValue.value.push(e.detail)
}
// 第三个文本框 change 事件
function thirdChange(e: any) {
    initialization();
    if (e.detail.keyCode == 8) {
        secondFocus.value = true
    } else {
        setTimeout(() => {
            fourFocus.value = true;
        }, 100)
    }
    inputValue.value.push(e.detail)
}
// 第四个文本框 change 事件
function fourChange(e: any) {
    initialization();
    if (e.detail.keyCode == 8) {
        thirdFocus.value = true
    } else {
        setTimeout(() => {
            fiveFocus.value = true;
        }, 100)
    }
    inputValue.value.push(e.detail)
}
// 第五个文本框 change 事件
function fiveChange(e: any) {
    initialization();
    if (e.detail.keyCode == 8) {
        fourFocus.value = true
    } else {
        setTimeout(() => {
            sixFocus.value = true;
        }, 100)
    }
    inputValue.value.push(e.detail)
}
// 第六个文本框 change 事件
function sixthChange(e: any) {
    if (e.detail.keyCode == 8) {
        setTimeout(() => {
            sixFocus.value = true;
        }, 100)
    }
    initialization();
    inputValue.value.push(e.detail)
    //打印看输入的值串
    console.log("----222", inputValue.value)
}
// 初始化所有焦点变量
function initialization() {
    firstFocus.value = false;
    secondFocus.value = false;
    thirdFocus.value = false;
    fourFocus.value = false;
    fiveFocus.value = false;
    sixFocus.value = false;
}
/**
 * 初始化
 */
onActivated(() => {
    initialization()
    focus()
})
</script>
<template>
    <view>
        <view>
            <view>请输入订单号后六位</view>
            <view>手机查看美团订单号后六位</view>
        </view>
        <view>
            <van-field type="number" maxlength="1"
                :style="firstFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                @focus='focus' :focus="firstFocus" @input="firstChange" input-align="center" />
            <van-field type="number" maxlength="1"
                :style="secondFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                :focus="secondFocus" @input='secondChange' input-align="center" />
            <van-field type="number" maxlength="1"
                :style="thirdFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                :focus="thirdFocus" @input='thirdChange' input-align="center" />
            <van-field type="number" maxlength="1"
                :style="fourFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                :focus="fourFocus" @input='fourChange' input-align="center" />
            <van-field type="number" maxlength="1"
                :style="fiveFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                :focus="fiveFocus" @input='fiveChange' input-align="center" />
            <van-field type="number" maxlength="1"
                :style="sixFocus ? 'border: 2rpx solid #2681FE;box-shadow: 0 0 20rpx 0 rgba(38,129,254,0.20);' : ''"
                :focus="sixFocus" @input='sixthChange' input-align="center" />
        </view>
    </view>
</template>
<style scoped>
.layout {
    display: flex;
    flex-direction: column;
}
.input-content {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 46rpx 0 46rpx;
    margin-top: 100rpx;
    background: #ffffff;
}
.top-view {
    align-items: left;
    @extend .layout
}
.title {
    margin-top: 100rpx;
    margin-left: 48rpx;
    font-size: 48rpx;
    color: #333333;
}
.describe {
    font-size: 28rpx;
    color: #A3A5A7;
    margin-left: 48rpx;
    margin-top: 14rpx;
}
</style>
<style>
.mt-code {
    .field-custom {
        margin: 0 8rpx 0 8rpx;
        :deep(.van-cell) {
            width: 96rpx;
            height: 96rpx;
            border-radius: 16rpx;
            background: #F7F8F9;
            font-size: 48rpx;
            color: #333333;
        }
    }
}
</style>

以上就是 直播商城源码,验证码 获取码输入框实现,更多内容欢迎关注之后的文章

 

标签:false,focus,验证码,value,detail,输入框,源码,input,true
From: https://www.cnblogs.com/yunbaomengnan/p/17867219.html

相关文章

  • Spring源码学习之Web数据绑定器WebDataBinder
    WebDataBinder1.描述特殊的数据绑定器用于从web请求参数到JavaBean对象的数据绑定。专为web环境,但不依赖于ServletAPI;作为更具体的DataBinder变体的基类,例如ServletRequestDataBinder。2.注意:数据绑定会暴露对象图中不打算被外部客户端访问或修改的部分,从而导致安全问题。因......
  • LIMS实验室信息管理系统源码,支持二次开发
    LIMS实验室信息管理系统源码,支持二次开发LIMS实验室信息管理系统是一种软件类型,旨在通过跟踪与样品、实验、实验室工作流程和仪器相关的数据,提高实验室产能和效率。覆盖实验室从合同审批、委托下单、样品管理、生产调度、检测记录、报告管理、财务开票结算等全业务的过程管理。1、......
  • 深入解析C# List<T>的源码
    前面的文章中解释了Array的初始化和元素插入,以及数组整体的存储结构(《深度分析C#中Array的存储结构》)。这里我们再来详细的了解另一种存储结构List<T>, List<T>是ArrayList 泛型版本,是一个泛型集合类,用于表示动态大小的数组。List<T>应该是我们在开发过程中使用的频率最......
  • 手动 focus 输入框后,如何将输入游标移动(定位)到输入框现有值的末尾
    如果输入框内有值,直接使用HTMLInputElement自身的focus方法,会聚焦,但游标是处于默认的起始位置(如下图示例代码及图片):constinput=document.querySelector('._lng-input');input.focus(); 处理方案--兼容性好的Hack代码:constinput=document.querySelector('._lng-inpu......
  • ubuntu server 22 LTS 安装MySQL8(二进制源码方式)
    原作来源:https://github.com/aminglinux/daily_shell/blob/main/29.sh根据我自己情况稍作修改mysql下载地址:https://downloads.mysql.com/archives/community/ 按照顺序执行逐行执行注意执行过程的提示,报错需处理:tar-xvfmysql-8.0.34-linux-glibc2.17-x86_64.tarsudo......
  • NS-3源码学习(五)手搓一个multi-Link的WiFi7系统
    NS-3源码学习(五)手搓一个multi-Link的WiFi7系统目的<--Channel-0--APSTA<--Channel-1-创建一个一AP,一STA的系统,这两个结点通过同一载波频率。同一信道宽度但不同的中心频率的两个不同信道号的信道相连,观察数据传输的过程。就结果来看,虽然是mut......
  • SpringBoot电子病历编辑器源码
    电子病历系统以服务临床业务工作开展为核心,为全院医护人员、业务管理人员、院级领导提供流程化、信息化、自动化、智能化的临床业务综合管理平台。同时,随着电子病历数据的不断累积,它将成为动态的智能的信息源,发挥传统纸质静态病历难以实现的重要作用,为医务人与的科研、教学提供准......
  • CBV源码分析
    1.路由配置path('index/',视图类名.as_view())#as_view是类的绑定方法2.执行流程(分析)path('index/',index),--->请求来了,路由匹配成功会执行index(request,)path('index/',UserView.as_view()),--->同样的,请求来了,路由匹配成功则会执行UserView.as_view()(r......
  • JsonResponse源码分析
    1.视图层返回JsonResponsereturnJsonResponse({'name':'kevin','age':19})2.触发JsonResponse的__init__方法将{'name':'kevin','age':19}传给data3.源码分析def__init__(self,data,encoder=DjangoJSONEn......
  • 图文剖析 big.js 四则运算源码
    big.js,一个小型、快速的用于任意精度的十进制算术的JavaScript库。big.js用于解决平常项目中进行算术运算时精度丢失引起的结果不准确的问题。和big.js类似的两个库bignumber.js和decimal.js也都是出自同一作者(MikeMcl)之手。作者在这里详细说明了他们之间的区别big.......