前军教程网

水哥说前端，不太喜欢形而上的理论知识，或者高大上的架构理念，专注一些实用的方法或者实战经验，坚定的应用主义者。第一次发文，先来个近期遇到的小交互。

一个小程序密码框的制作，有些前端会去选择一些开源插件，其实实现起来并不复杂，话不多说上截图。

本次交互是基于小程序实现，其实无论是vue，angular，react或者原生H5都是同理，内置方法不一样而已

步骤一：

div|view模拟六个密码框，同时内置长宽为0的输入框，点击密码框时模拟触发输入框的focus事件

<view class="relative pasWapw" bindtap="pasWapclick">
  <view class="pasWap">
    <view wx:for="{{d}}" class="d font3">{{item}}</view>
	</view>
	<input focus="{{focus}}" value="{{password}}" bindinput="inputchange" maxlength='6' style="width: 0; height: 0" type="password"></input>
</view>

步骤二

点击密码框模拟输入框的focus事件

步骤三

监听输入框的值改变，动态修改密码框内的html，把input的值拆成数组遍历赋值给六个密码框，当监听到密码已经达到六位数时，执行下一步操作

let v = e.detail.value;
this.data.password = v;
this.data.d.forEach((a, b)=>{
  if(v.split('')[b]){
    this.data.d[b] = '*'
  }else{
    this.data.d[b] = ''
  }
})
this.setData({
  d: this.data.d
})

if(this.data.password.length == 6){
  this.payVerify();
}