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

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

本次交互是基于小程序实现，其实无论是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>

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

步骤二

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

点击密码框模拟输入框的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();}

监听输入框的值改变，动态修改密码框内的html