小程序实现6位数密码框

闲着蛋疼，于是学习开发微信小程序，打算写一个面杀自动法官得小程序，方便和朋友出去面杀，该案例不具备一定的严谨性，毕竟此时我才学了2天的小程序，瑟瑟发抖

需求如下：需要输入房间号，才能进入游戏房间，类似6尾数密码框
大致思路：最原本的想法是撸6个文本框，输入完1个自动focus下一个，发现特么的键盘弹起、收回、弹起、收回，体验非常糟糕，于是添加一个隐藏的input，其余6个文本框全部disabled，只负责展示，当用户习惯性的点击6个虚假的文本框中的任意一个，触发聚焦，聚焦到隐藏在暗处得文本框，再讲隐藏在暗处的文本框中的value渲染到6个假的文本框中，Done!!!

<view class='container'><view class='render-wrap'><block wx:for='{{dataSource}}' wx:key='this'><input type='number' class='render-input' bindtap='onTapFocus' type='{{showType}}' disabled value='{{item.initValue}}'></input></block><input type='number' maxlength='6' focus='{{isFocus}}' class='hidden-input' bindinput='mobileInput'></input></view>
</view>

Page({/*** 页面的初始数据*/data: {//用户输入明文、暗文showType:'number',//如果是密码换成'password'isFocus: false,//默认四位，手动copy两个json，正常密码框是6位dataSource: [{initValue: ''}, {initValue: ''}, {initValue: ''}, {initValue: ''}]},/*** 用户tap假的Input,focus到隐藏的input*/onTapFocus: function() {this.setData({isFocus: true});},/*** 移动端键入* 注意:在pc端无法显示键盘，移动端下编译、预览正常*/mobileInput: function(e) {let dataSource = this.data.dataSource;let curInpArr = e.detail.value.split('');let curInpArrLength = curInpArr.length;if (curInpArr.length != this.data.dataSource.length)for (let i = 0; i < dataSource.length - curInpArrLength; i++)curInpArr.push('');for (let i = 0; i < this.data.dataSource.length; i++) {let initValue = 'dataSource[' + i + '].initValue';this.setData({[initValue]: curInpArr[i]});}},
})

.render-wrap{display: flex;flex-direction: row;
}
.render-input{width: 100rpx;height: 100rpx;border:1rpx solid #eee;border-left: none;box-sizing: border-box;text-align: center;
}.render-input:first-child{border-left: 1rpx solid #eee;
}.hidden-input{width: 0;height: 0;
}

小程序实现6位数密码框相关推荐

小程序 sha1和服务器有关系吗,微信小程序使用sha1实现密码加密的方法介绍
微信小程序使用sha1实现密码加密的方法介绍,字符串,程序,转换为,详解,函数微信小程序使用sha1实现密码加密的方法介绍易采站长站,站长之家为您整理了微信小程序使用sha1实现密码加密的方法介绍 ...
小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...
f2 柱状图滚动钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...
背景开发钉钉小程序中需要用到模态框文档里也没有自己搞一个- 效果大概长这个样点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
微信小程序，实现首页弹框活动引导功能
目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 1.需求后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1 ...
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿 https://github.com/t5442107/yj_wepy_gesture_lock 用vscode 打开测试! 下载 h ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...

小程序实现6位数密码框

小程序实现6位数密码框相关推荐

最新文章

热门文章