微信小程序密码输入框
时间:2022-07-24
本文章向大家介绍微信小程序密码输入框,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<view class='box'>
<view class='row' bindtap='inputFocus'>
<view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index">
<input type="number" value="{{entryList.length>=index+1?entryList[index]:''}}" disabled></input>
</view>
</view>
<input type="number" class='entry' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="inputValue"></input>
</view>
.row {
display: flex;
align-items: center;
justify-content: space-around;
}
.row view {
width: 80rpx;
height: 80rpx;
border: 1px solid #f5f5f5;
border-radius: 5rpx;
display: flex;
align-items: center;
justify-content: center;
}
.row view input {
width: 100%;
height: 100%;
text-align: center;
}
.active {
border: 1px solid red !important;
}
.entry {
width: 0;
height: 0;
opacity: 0;
}
Page({
data: {
isFocus: true,
Length: 6,
entryList: "",
active: 0,
},
inputFocus() {
this.setData({
isFocus: true
})
},
inputValue(e) {
var value = e.detail.value;
var list= e.detail.value.split('')
this.setData({
entryList: value,
active: list.length
})
},
})
- 每天学一点Docker(3)(制作你的第一个容器)
- 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
- 1653: [Usaco2006 Feb]Backward Digit Sums
- 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场
- 1682: [Usaco2005 Mar]Out of Hay 干草危机
- 1637: [Usaco2007 Mar]Balanced Lineup
- AutoFac在项目中的应用
- 每天学一点Docker(5)——了解Docker架构
- 跨站请求伪造(CSRF/XSRF)
- 我这么玩Web Api(一)
- 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路
- 点双连通分量与割点
- 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐
- 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 4. Validator校验器的五大核心组件,一个都不能少
- leetcode之罗马数字转整数
- B站签到-云函数
- echarts常用功能封装|抽象为mixin
- TCB系列学习文章——云开发的云托管(八)
- TCB系列学习文章——云开发登录篇(九)
- 字符串操作的全面总结
- C 语言 C++ 中 assert 的用法
- kubernetes之StatefulSet控制器
- 如何使用 S3CMD 访问 COS 服务
- 利用STS临时密钥服务快速搭建直传页面的实践
- codeforces 1436C(二分+数学)
- WAF案例:为什么curl可以wget不行?
- React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理
- React进阶(5)-分离容器组件,UI组件(无状态组件)