微信小程序之支付密码输入demo

在小程序中实现支付密码的输入，要解决几个问题：?
1、小程序要想唤起键盘，必须要借助input控件。通过input控件和其属性focus来唤起和隐藏输入键盘。

2、要让input控件不可见。让光标和输入的字符都不可见，这里是把input控件定位到左边不可见范围。

先看实现后的效果图：

实现demo代码：

1、页面代码

<view catchtap='showInputLayer'class"btn_pay">立即支付</view>
<!-- 密码输入框 -->
>
    'bg_layer'></view>
>
>
'hidePayLayer'><text></text></view>
</view>
><text>使用会员卡余额支付需要验证身份，验证通过后才可进行支付。</text></view>
'getFocus'>
wx:for'{{6}}'wx:key'item'wx:for-index'i'>
i}}'></text>
</view>
忘记密码</view>
passwordtype'number'focus'{{payFocus}}'bindinput'inputPwd'maxlength'6'/>
</view>

2、js代码

//获取应用实例
const app = getApp()

Page({
    showPayPwdInput false,  //是否展示密码输入层
//输入的密码
  },
    this.showInputLayer();
/**
   */
setData({ showPayPwdInput payFocustrue});
/**
   */
var val datapwdVal;

      wxshowToast({
    });

  getFocus   * 输入密码监听
       edetailvalue });

        hidePayLayer();
}
})

3、样式

  backgroundcolor#d3a95a; color: #fff; font-size: 36rpx; text-align: center; 
/* 支付密码css start */
 rgba(0.6); zindex9998;
    position500rpx100%;394rpx;
}
    width90rpx textalign center 
}
 absolute;
}
  width20rpx;
 white  border#aaa;

/* 密码掩码模拟 */
input_row pwd_item  flex1 
nth-lastoftype)} 
 background#555;

  float#ff7800;

input_control -300rpx}

DEMO地址：https://github.com/xiaotanit/Tan_PayPwdInput

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!