Fork me on GitHub

小程序之密码的type切换踩坑

发表于 | 分类于 | 阅读次数:

问题

初入小程序，框架和vue差别不是太大，上手比较容易，但是在表单这一块，小程序显得有些小坑，需求就是做一个下面的需求，进行input的type属性的来回切换（vue很轻松就能实现~~），效果如下图
“图片描述”

记录代码如下

开始的需求是一个checkbox组件控制三个密码框（上图只显示两个密码框），但是因为微信小程序改变type需要获取到焦点，常用开发方式（vue改变type方式）在小程序里面不受用，会有bug，故改为3个checkbox组件分别控制对应的input，代码如下：

wxml片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<view class="wraper">
  <view class="clearfix content">
    <view wx:if="{{!isSet}}" class="rows">
      <view class="fl">旧密码</view>
      <checkbox-group class="group fr" data-idx="0" bindchange="checkboxChange">
        <label>
          <checkbox hidden value="{{checkboxItems[0].name}}" checked="{{checkboxItems[0].checked}}"></checkbox>
          <view class="label-1__icon">
            <view class="label-1__icon-checked" style="background:{{checkboxItems[0].checked ? urlShow : urlHidden}};background-size: 36rpx 26rpx;"></view>
          </view>
        </label>
      </checkbox-group>
      <input password="{{checkboxItems[0].inputType}}" focus='{{checkboxItems[0].focus}}' type='number' maxlength='6' placeholder='输入6位数字密码' bindinput='oldPassWord'></input>
    </view>
    <view class="rows">
      <view class="fl">新密码</view>
      <checkbox-group class="group fr" data-idx="1" bindchange="checkboxChange">
        <label>
          <checkbox hidden value="{{checkboxItems[1].name}}" checked="{{checkboxItems[1].checked}}"></checkbox>
          <view class="label-1__icon">
            <view class="label-1__icon-checked" style="background:{{checkboxItems[1].checked ? urlShow : urlHidden}};background-size: 36rpx 26rpx;"></view>
          </view>
        </label>
      </checkbox-group>
      <input password="{{checkboxItems[1].inputType}}" focus='{{checkboxItems[1].focus}}' type='number' maxlength='6' placeholder='输入6位数字密码' bindinput='passWord'></input>
    </view>
    <view class="rows noboder">
      <view class="fl">确认新密码</view>
      <checkbox-group class="group fr" data-idx="2" bindchange="checkboxChange">
        <label>
          <checkbox hidden value="{{checkboxItems[2].name}}" checked="{{checkboxItems[2].checked}}"></checkbox>
          <view class="label-1__icon">
            <view class="label-1__icon-checked" style="background:{{checkboxItems[2].checked ? urlShow : urlHidden}};background-size: 36rpx 26rpx;"></view>
          </view>
        </label>
      </checkbox-group>
      <input password="{{checkboxItems[2].inputType}}" focus='{{checkboxItems[2].focus}}' type='number' maxlength='6' placeholder='输入6位数字密码' bindinput='passWordAgain'></input>
    </view>
  </view>
  <view class="clearfix groupContent">
    <text wx:if="{{!isSet}}" bindtap="forgetPass" class="fr forgetPass">忘记密码？</text>
  </view>
  <view hidden="{{ !errMsg }}" class="errMsg">{{ errMsg }}</view>
  <view class="verify" bindtap="verify">确认</view>
</view>

这里wxss片段就省了（不是重点）
js片段(这里为了方便看，其他的js部分移除)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Page({
  data: {
    //3个checkbox组件数据
    checkboxItems: [
      {
        name: 'agree',
        checked: false,
        inputType: true,
        focus: false
      },
      {
        name: 'agree',
        checked: false,
        inputType: true,
        focus: false
      },
      {
        name: 'agree',
        checked: false,
        inputType: true,
        focus: false
      }],
    urlShow: 'url(../../imgs/icon-pwdshow.png) no-repeat',
    urlHidden: 'url(../../imgs/icon-pwdhidden.png) no-repeat;',
  },
  //checkbox
  checkboxChange: function (e) {
    let idx = e.currentTarget.dataset.idx,
      checked = e.detail.value,
      changed = {},
      inputType = `checkboxItems[${idx}].inputType`,
      focus = `checkboxItems[${idx}].focus`,
      tempObj = {};
    if (checked.indexOf(this.data.checkboxItems[idx].name) !== -1) {
      changed[`checkboxItems[${idx}].checked`] = true
      tempObj[inputType] = false;
      tempObj[focus] = true;
      this.setData(tempObj)
    } else {
      changed[`checkboxItems[${idx}].checked`] = false
      tempObj[inputType] = true;
      tempObj[focus] = true;
      this.setData(tempObj)
    }
    this.setData(changed)
  },
})