今天抽空弄了一下防密码式的邀请码/验证码的6位数的输入框。
这些数字啊，字母啊，都可以设置为明文或者密文，其实是隐藏在下一排看不到的。
wxml代码
//邀请码图片<image src="/img/ziti.png" class="zi-ti"></image><form bindsubmit="formSubmit"><view class='content'><block wx:for="{{numList}}" wx:key="item"><input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input></block></view><input name="password" password="{{true}}" class='ipt' maxlength="{{numList}}" focus="{{isFocus}}" bindinput="Focus"></input><button class="sure-ding" formType="submit">确定</button></form>//背景图片，这是云开发里面的图<image class="shan-img" src="cloud://gws111.6777-gws111-1301820526/shan.png" mode='widthFix'></image>
wcss代码
.zi-ti {width: 60%;margin-left: 20%;height: 100rpx;margin-top: 150rpx;}.content {display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 50rpx;}.iptbox {width: 80rpx;height: 80rpx;border: solid 1rpx #7d7d7d;border-radius: 20rpx;display: flex;justify-content: center;align-items: center;text-align: center;margin-left: 3%;}.ipt {width: 0;height: 0;}.sure-ding {width: 90%;background-color: #00dfa5;color: white;border-radius: 20rpx;position: fixed;bottom: 0;margin-bottom: 30rpx;margin-left: 5%;}
js代码
const app = getApp()//引用app.js里的数据Page({/*** 页面的初始数据*/data: {numList: 6, //输入框个数isFocus: true, //聚焦Value: "", //输入的内容ispassword: false, //是否密文显示 true为密文， false为明文。},//输入事件获取数据Focus(e) {var that = this;var inputValue = e.detail.value;that.setData({Value: inputValue,})},Tap() {var that = this;that.setData({isFocus: true,})},formSubmit(e) {var that = thisvar pass_code = e.detail.value.password},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
