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

微信小程序实现联动删除输入验证码框

news 来源：原创 2025/6/26 16:10:00

以下是json代码

{"component": true,"usingComponents": {}
}

以下是wxml代码

<van-popup show="{{ show }}" bind:close="onClose"   custom-class="extract"><image  src="../../images/extract/icon1.png" mode=""/><view class="title">请输入验证码</view><view class="ys-verification">//利用这个覆盖到4个输入框之上解决输入时键盘出现闪烁问题<input class="pfinpuit" type="text" value="{{value}}" bindinput='onchangeinput' maxlength="{{amount}}" /><view class="input-wrapper" wx:for="{{amount}}" wx:key="index"><input type="number" value="{{code[index]}}" data-index="{{item}}" title="code" maxlength="1" data-index="{{index}}" />//focus="{{item == currentIndex}}" //bindinput='handleInput'</view></view><view class="tips">请输入验证码</view><view class="btn">提交</view>
</van-popup>

以下是css代码

.pfinpuit{width: 100%;height: 100%;position: absolute;top: 0;left: 0;
opacity: 0;
z-index: 7;padding-left: 100%;overflow: hidden;
color: transparent;
caret-color: transparent;
}
.ys-verification {width: 100%;height: 100rpx;display: flex;justify-content: space-around;margin-top: 34rpx;padding-top: 48rpx;margin-bottom: 24rpx;border-top: 2rpx solid #FFFFFF;position: relative;overflow: hidden;
}
.ys-verification .input-wrapper {width: 102rpx;height: 100rpx;background: #FFFFFF;border-radius: 8rpx;position: relative;
}
.ys-verification input {position: absolute;width: 100%;height: 100%;text-align: center;font-size: 50rpx;color: #333;background: #fff;
}
.extract {width: 622rpx;height: 490rpx;background: linear-gradient(135deg, #E1FFFB 0%, #FFE6E6 100%);border-radius: 8rpx;padding: 32rpx;position: absolute;
}
.extract > image {position: absolute;width: 36rpx;height: 36rpx;top: 36rpx;right: 36rpx;
}
.extract .title {font-size: 32rpx;color: #41475B;text-align: center;
}
.extract .tips {font-size: 28rpx;color: #41475B;text-align: center;
}
.extract .btn {width: 304rpx;height: 84rpx;text-align: center;line-height: 84rpx;background: #05C8AF;border-radius: 12rpx ;font-size: 28rpx;color: #FFFFFF;margin: 48rpx auto 0;
}

以下是js逻辑代码

Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {show:1,code:[],currentIndex:0,amount:4,value:''},/*** 组件的方法列表*/methods: {onchangeinput(e){
this.setData({value: e.detail.value,code:String( e.detail.value).split('')
})},onClose(e){
this.setData({show:0
});},handleInput(e){let value = this.validateNumber(e.detail.value);let index = e.currentTarget.dataset.index;const oldValue = this.data.code[index];if(value!==''){let code = this.data.code;code[index] = value;this.setData({code,currentIndex: ++index});if(!code.includes('')){this.triggerEvent('onCompleted',{code: code.join('')},{bubbles: true,composed: true})}}else{const isDeleted = oldValue !== ''; // 但是无法监听当value为''的情况，因为不会触发input事件-->let code = this.data.code;code[index] = '';this.setData({code,currentIndex: isDeleted?--index:index})}},validateNumber(val) {return val.replace(/\D/g, '')},},attached() {}
})

微信小程序实现联动删除输入验证码框

以下是json代码 {"component": true,"usingComponents": {} }以下是wxml代码 <van-popup show"{{ show }}" bind:close"onClose" custom-class"extract"><image src"../../images/extract/icon1.png"…...

编程日记 2025/6/26 16:10:00

C语言程序设计P6-1【应用指针进行程序设计 | 第一节】——知识要点：指针的概念、定义和运算、指针变量作函数的参数

知识要点：指针的概念、定义和运算、指针变量作函数的参数视频： 目录一、任务分析二、必备知识与理论三、任务实施一、任务分析输入两个整数，按大小顺序输出，要求用函数处理，而且用指针类型的数据作函数参数…...

编程日记 2025/6/25 11:39:30

C++编程：基于cpp-httplib和nlohmann/json实现简单的HTTP Server

文章目录 0. 引言1. 完整实例代码2. 关键实现3. 运行与测试 0. 引言本文基于 cpp-httplib 和 nlohmann/json 实现简单的 HTTPS Server 实例代码，这两个库均是head-only的。 1. 完整实例代码如下实例程序修改自example/server.cc #include <httplib.h>#i…...

编程日记 2025/6/25 8:17:21

多模态大模型（二）——用Transformer Encoder和Decoder的方法(BLIP、CoCa、BEiTv3)

文章目录 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 理解、生成我都要，一个很有效的、根据图片生成caption的工具1. BLIP的研究动机2. BLIP的模型结构3. CapFilt Model4. BLIP的训练过程 CoCa: C…...

编程日记 2025/6/25 21:43:57

SpringBoot快速入门

SpringBoot 文章目录 SpringBoot1. Spring Boot 概念2. Spring 使用痛点3. Spring Boot功能4. 快速搭建5. 起步依赖原理6. SpringBoot 配置6.1 配置文件6.2 YAML介绍6.3 YAML语法6.4 YAML数据6.5 YAML参数引用 7.配置数据读取7.1 Value("${}")7.2 Environment7.3 Con…...

编程日记 2025/6/26 1:08:32

Qt编写区位码gb2312、机内码、国标码————附带详细介绍和编码实现

文章目录 0 背景1 了解编码1.1 ASCII码1.2 机内码、国标码、区位码1.2.1 区位码1.2.2 国标码（GB 2312-80）1.2.3 汉字机内码（GB 2312） 1.3 GBK和GB2312的区别2 编码实现2.1 QString数据转QByteArray类型2.1.1 使用QTextCodec2.1.2 …...

编程日记 2025/6/22 21:14:34

IDEA 未启用lombok插件的Bug

项目中maven已引用了lombok依赖，之前运行没有问题的，但有时启动会提示： java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled. Your processor is: com.sun.proxy.$Proxy8 Lombok support…...

编程日记 2025/6/24 11:59:01

R语言学习笔记-1

1. 基础操作和函数清空环境：rm(list ls()) 用于清空当前的R环境。打印输出：print("Hello, world") 用于输出文本到控制台。查看已安装包和加载包： search()：查看当前加载的包。install.packages("package_na…...

编程日记 2025/6/23 14:47:46

NFT的公链及开放联盟链信息整理

BSN链名称内容类型开放联盟链网址https://www.bsnbase.com/节点信息登陆后可免费获取区块链浏览器可查看交易详情使用案例光明艺品、数藏中国、千寻数藏、集集文创、乾坤数藏至信链名称内容类型开放联盟链网址https://zxchain.qq.com/节点信息需要登录并充值后获取区块链…...

编程日记 2025/6/24 23:26:26

android notification

前言在做应用时，时常需要在通知栏显示一条通知，那么具体流程是怎样的呢，怀着这样的探究目的，来进行一步步源码分析。源码梳理 package com.android.server; ... public final class SystemServer implements Dumpable {...pr…...

编程日记 2025/6/21 20:53:13

C# 多态性

文章目录前言一、多态性的定义二、C# 中的多态性实现方式1. 方法重写（Overriding）2. 方法重载（Overloading）3. 接口实现（Interface implementation） 三、多态性的优点1. 提高代码的可维护性2. 增强代码的可…...

编程日记 2025/6/23 2:03:22

类与对象以及ES6的继承

认识class定义类类的声明用的比较多类与构造函数的异同类的构造函数类的实例方法类的访问器方法在类里面写拦截方法类的静态方法通过类名直接访问 es6类的继承-extends super关键字子类可以重写父类方法包括父类的静态方法也可以继承父类的静态方法 babel可以将新的代…...

编程日记 2025/6/26 1:22:13

每日一站技術架構解析之-cc手機桌布網

# 網站技術架構解析： ## 一、整體架構概述https://tw.ccwallpaper.com是一個提供手機壁紙、桌布免費下載的網站，其技術架構設計旨在實現高效的圖片資源管理與用戶訪問體驗優化。 ### （一）前端展示 1. **HTML/CSS/JavaScript基礎構…...

编程日记 2025/5/30 2:08:57

【橘子容器】如何构建一个docker镜像

你肯定打过docker镜像是吧，作为一个开发这很正常，那么你用的什么打包方式呢，这里我们来梳理几种常用的docker镜像构建方式。 ps：这里不是太讲原理，更多的是一种科普和操作。因为讲原理的东西网上已经够多了。一、Dock…...

编程日记 2025/6/25 4:17:14

【漏洞复现】CVE-2024-34102 Magento Open Source XXE漏洞

目录漏洞介绍影响版本环境搭建查看版本漏洞复现手动复现漏洞 poc Magento Open Source 是一个免费开源的电子商务平台，适合中小企业或开发团队通过自定义代码和插件创建在线商店。它由社区开发和支持，功能强大但需要更多的技术投入。Adobe…...

编程日记 2025/6/26 11:10:42

数据结构 ——二叉树转广义表

数据结构 ——二叉树转广义表 1、树转广义表如下一棵树，转换为广义表 root(c(a()(b()()))(e(d()())(f()(j(h()())())))) (根（左子树）（右子树）) 代码实现 #include<stdio.h> #include<stdlib.h>//保存…...

编程日记 2025/6/24 18:24:00

Redis篇-6--原理篇5--单线程模型

1、概述 Redis 采用单线程模型来处理客户端请求，这意味着在任意时刻只有一个命令被执行。这种设计简化了 Redis 的实现，并确保了高并发环境下的数据一致性。尽管 Redis 是单线程的，但它通过高效的内存管理和网络 I/O 操作，仍然能…...

编程日记 2025/6/25 14:50:52

LSTM详解

1. LSTM设计 LSTM（长短期记忆网络）详解长短期记忆网络（LSTM, Long Short-Term Memory）是一种特殊的循环神经网络（RNN），特别适合处理和预测序列数据中的长时间依赖关系。LSTM 通过引入“门机制”（如输入门、遗忘门、输出门）来解决标准 RNN 在长时间序列任务中梯度消…...

编程日记 2025/6/25 11:34:42

Docker 安装 Seata2.0.0 （快速配置）

说明：已安装Docker、MySql等，案例使用Mysql数据库模式、Nacos配置信息 1、准备工作 1.1 拉取镜像 [rootTseng ~]# docker pull seataio/seata-server:2.0.0 2.0.0: Pulling from seataio/seata-server 001c52e26ad5: Already exists d9d4b9b6e964: P…...

编程日记 2025/6/25 18:04:06

文件断点续传（视频播放，大文件下载）

客户端每次请求取大文件部分数据。浏览器播放mp4视频时，会首先传Range消息头，检测到206状态码，和Content-Range，Accept-Ranges 会自动请求余下数据。后端需要在文件任意偏移量取数据。参考： springboot项目实现断…...

编程日记 2025/6/24 1:47:46

神经网络基础-初识神经网络

人工神经网络（ Artificial Neural Network， 简写为ANN）也简称为神经网络（NN），是一种模仿生物神经网络结构和功能的计算模型。人脑可以看做是一个生物神经网络，由众多的神经元连接而成。各个神经…...

编程日记 2025/6/23 6:02:37

爬虫获取的数据能否用于商业分析？

根据搜索结果，爬虫获取的数据能否用于商业分析，主要取决于以下几个因素： 数据的合法性与合规性： 爬虫技术本身并不违法，关键在于使用的方式和目的。爬虫技术的使用必须遵守相关法律法规，如《反不正当竞争法…...

编程日记 2025/6/24 21:27:13

【Java】3、并发编程 JUC（模块三：设计模式）

目录 Immutability模式Copy-on-Write模式线程本地存储模式Guarded Suspension模式（保护性暂停）Balking模式Thread-Per-Message模式Worker Thread模式两阶段终止模式生产者-消费者模式 Immutability模式 Copy-on-Write模式线程本地存储模式 Guarded S…...

编程日记 2025/6/25 23:47:26

ASP.NET｜日常开发中连接Sqlite数据库详解

ASP.NET｜日常开发中连接Sqlite数据库详解前言一、安装和引用相关库1.1 安装 SQLite 驱动1.2 引用命名空间二、配置连接字符串2.1 连接字符串的基本格式三、建立数据库连接3.1 创建连接对象并打开连接四、执行数据库操作4.1 创建表（以简单的用户表为例…...

编程日记 2025/6/24 20:56:26

渗透测试学习笔记（四）web漏洞

一.web相关漏洞漏洞分类漏洞类型Web 源码类漏洞SQL 注入，文件上传，XSS，代码执行，变量覆盖，逻辑漏洞，反序列化Web 中间件漏洞未授权访问，变量覆盖数据库漏洞弱口令，权限提升系统层漏…...

编程日记 2025/6/24 6:48:37

Facebook如何避免因IP变动而封号？实用指南

随着Facebook在个人社交与商业推广中的广泛应用，越来越多的用户面临因“IP变动”而被封号的问题。尤其是跨境电商、广告运营者和多账号管理用户，这种情况可能严重影响正常使用和业务发展。那么，如何避免因IP变动导致的封号问题？本…...

编程日记 2025/6/26 4:27:00

【Vulkan入门】10-CreatePipeline

目录先叨叨Git信息关键代码TestPipeline::Initialize() 编译运行先叨叨到上篇为止已经创建了FrameBuffer和RenderPass。建立Pipeline的先决条件已经具备。本篇就来创建Pipeline。 Git信息 repository: https://gitee.com/J8_series/easy-car-uitag: 10-CreatePipelineurl…...

编程日记 2025/6/26 5:09:21

视频安防监控平台：Liveweb视频监控管理云平台方案

LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，云台…...

编程日记 2025/6/24 17:37:15

企业级日志分析系统ELK之ELK概述

ELK 概述 ELK 介绍什么是 ELK 早期IT架构中的系统和应用的日志分散在不同的主机和文件，如果应用出现问题，开发和运维人员想排查原因，就要先找到相应的主机上的日志文件再进行查找和分析，所以非常不方便，而且还涉及…...

编程日记 2025/6/21 14:33:46

scala隐式转换

概念： 在Scala编程语言中，隐式转换是一种强大的功能，它允许程序在需要时自动转换数据类型或增强对象功能。这种转换通常是通过定义一个标记为implicit的函数来实现的，这个函数能够将一种类型转换为另一种类型。隐式转换的使用可以…...

编程日记 2025/6/26 13:14:46

基于无线传感器网络的无线土壤湿度采集系统（附详细使用教程+完整代码+原理图+完整课设报告）

🎊项目专栏：【Zigbee课程设计系列文章】（附详细使用教程完整代码原理图完整课设报告） 前言 👑由于无线传感器网络（也即是Zigbee）作为🌐物联网工程的一门必修专业课，具有…...

编程日记 2025/6/26 13:14:27

367_C++_计算mouse移动过程中，视频框的右侧、底部边距，以及根据实时的右侧、底部边距计算—视频框的左上角位置

代码分析 1. restorePos 方法 restorePos 的作用是恢复 NavigationFrame 的位置，将其移动到父窗口或者指定矩形内的特定位置。 void NavigationFrame::restorePos() {// 获取目标矩形：优先使用 `m_pRect`，否则默认使用视频区域或父窗口区域RSRect videoRect(m_pVide...

编程日记 2025/5/16 5:58:12

Ubuntu下将Julia嵌入Jupyter内核

一.安装 Julia 如果 Julia 尚未安装： 打开终端，下载最新的 Julia 安装包： wget https://julialang-s3.julialang.org/bin/linux/x64/1.9/julia-1.9.3-linux-x86_64.tar.gz 解压并移动到 /opt： tar -xvzf julia-1.9.3-linux-x86_…...

编程日记 2025/6/22 17:01:45

babeltrace与CTF相关学习笔记-1

babeltrace与CTF相关学习笔记-1 写在前面代码下载代码代码编译相关的依赖bootstrapconfigure过程编译和安装注编译完成后，初步的审视找到与ctf相关的工程tests./test-ctf-writer.sh先运行./test-ctf-writer.shctf-writer脚本 vscode跟踪ctf-writer.c后记&#xff1…...

编程日记 2025/6/21 22:58:31

国内Chrome浏览器下载安装教程，谷歌浏览器最新下载教程

今天主要讲解的是国内Chrome浏览器下载安装教程，谷歌浏览器最新下载教程，包括确认浏览器版本、ChromeDriver 驱动的下载，同理，这个教程同样适用于windows版本的，linux 版本的， mac 版本的。众所周知&…...

编程日记 2025/6/26 14:57:02

使用秘钥登录服务器

在我们测试或生产环境中，为了服务器安全性，有时可能需要以 SSH 密钥的方式登录服务器，接下来，将演示如何通过 SSH 私钥的方式来远程服务器。一、远程服务器生成密钥对 1、首先在目标远程服务器下生成 SSH 密钥对 ssh-keygen然…...

编程日记 2025/6/25 12:22:00

vscode中PyQt5模块代码提示问题

在VSCode中使用PyQt5时遇到代码提示缺失的问题，尝试了更新jedi、使用Pylance插件以及修改python.autoComplete.extraPaths配置均未见效。 ## 配置qgis的vscode开发环境在vscode编辑器中qgis的引入会报错，请按一下步骤解决： 1. 在vscode中&a…...

编程日记 2025/6/22 7:02:55

SpringBoot 整合 RabbitMQ 实现流量消峰

RabbitMQ 即一个消息队列，主要是用来实现应用程序的异步和解耦，同时也能起到消息缓冲，消息分发的作用。消息中间件在互联网公司的使用中越来越多，刚才还看到新闻阿里将 RocketMQ 捐献给了 Apache，当然了今天的主角还…...

编程日记 2025/6/21 23:46:57

Jenkins与SonarQube持续集成搭建及坑位详解

Jenkins和SonarQube都是软件开发过程中常用的工具，它们在代码管理、构建、测试和质量管理方面发挥着重要作用。以下是关于Jenkins与SonarQube的作用及整合步骤环境搭建的详细解释：一、Jenkins与SonarQube的作用 Jenkins： Jenkins是一个开源的持续集成和交付工具，它可以帮…...

编程日记 2025/6/24 19:55:51

从YOLOv5到训练实战：易用性和扩展性的加强

文章目录前言一、模型介绍二、YOLOv5网络结构1.Input（输入端）：智能预处理与优化策略2.Backbone（骨干网络）：高效特征提取3.NECK（颈部）：特征增强与多尺度融合4.Prediction…...

编程日记 2025/6/25 14:27:36

聊聊Oracle自适应查询优化

成也AQO败也AQO 因为工作的原因，我们接触到的客户大部分是金融和运营商行业，这些客户有个最大的特点是追求稳定，对于使用数据库新特性持保守的态度，不会轻易尝试某些可能会导致生产系统不稳定的新特性。上线前通常都会将一些新特…...

编程日记 2025/6/24 22:44:54

MySQL其四，各种函数，以及模拟了炸裂函数创建用户等操作

目录一、MySQL中的函数 1、IFNULL 2、IF 3、case （难点） 4、exists(难) --存在的意思二、常见的函数 1、字符串函数 2、数学函数 3、日期函数 （使用频率不是很高） 4、其他函数 5、关于字符集的问题 6、mysql炸裂函数…...

编程日记 2025/6/24 9:53:17

浅谈 php 采用curl 函数库获取网页 cookie 和带着cookie去访问网页的方法！！！！

由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号。有所收获。这里总结下个人经验。开讲前，先吐槽一下新浪云服务器，一个程序里的同一个函数在PC测试可以正常运行，在它那里就会挂的现象。老样子，我将在代…...

编程日记 2025/6/25 2:22:18

ssm-springmvc-学习笔记

简介简单的来说，就是一个在表述层负责和前端数据进行交互的框架帮我们简化了许多从前端获取数据的步骤 springmvc基本流程用户在原本的没有框架的时候请求会直接调用到controller这个类，但是其步骤非常繁琐所以我们就使用springmvc进行简化当用…...

编程日记 2025/6/22 16:00:40

nVisual 登录页页面配置说明

一、概述 nVisual登录页面可根据具体客户需要通过public\config\access.js文件进行自定义配置。页面可以大致分为4个部分，头部、底部、可移动区域以及页面中间的信息填写区域。其中头部和底部又包含头部左侧、头部中间、头部右侧、底部左侧、底部中间、底部右侧六个…...

编程日记 2025/6/25 8:47:16

Qt6开发自签名证书的https代理服务器

目标：制作一个具备类似Fiddler、Burpsuit、Wireshark的https协议代理抓包功能，但是集成到自己的app内，这样无需修改系统代理设置，使用QWebengineview通过自建的代理服务器，即可实现https包的实时监测、注入等自定义功能…...

编程日记 2025/6/26 15:59:35

crapy 爬虫框架的使用

1.scrapy框架安装安装前先安装python3和pycharm 社区版执行命令安装scrapy， pip install scrapy 2.创建项目执行命令： scrapy startproject test_spider 如图： 3.使用pycharm大开项目并设置pipenv虚拟机环境虚拟环境是为了依赖隔…...

编程日记 2025/6/24 11:24:18

Edge SCDN 边缘安全加速有什么用？

Edge SCDN是最新推出的边缘安全加速服务，它是一种融合了安全防护和内容分发加速功能的网络服务技术，通过在网络边缘部署服务器节点，来优化内容的传输和用户的访问体验，同时保障网络安全。抵御 DDoS 攻击： Edge SCDN …...

编程日记 2025/6/24 1:47:48

使用aarch64-unknown-linux-musl编译生成静态ARM64可执行文件

使用aarch64-unknown-linux-musl编译生成静态ARM64可执行文件使用aarch64-unknown-linux-musl编译生成静态ARM64可执行文件1. 安装aarch64-unknown-linux-musl目标2. 安装交叉编译工具链安装musl-cross-make 3. 配置Rust编译器使用交叉编译工具链4. 编译你的Rust项目5. 运行或…...

编程日记 2025/6/20 17:38:55

u-boot移植、配置、编译学习笔记【刚开始就中止了】

教程视频地址 https://www.bilibili.com/video/BV1L24y187cK 【这个视频中途停更了…原因是实际中需要去改u-boot的情况比较少】使用的u-boot的源码视频中使用的是 u-boot-2017.03 学习到这里，暂停u-boot的移植、配置、编译学习，原因是经过与老师…...

编程日记 2025/6/21 15:32:31

相关文章：