微信小程序实现类似微信提现、支付宝提现充值等 “自定义键盘“可实现自定义右下角搜索内容，手写input功能view组件，实现焦点获取事件

效果图

keyboard.wxml

<view class='input_view'>
  <text class='title'>提现金额：</text>
  <view class='input_box' bindtap='pay'>
    <text class='input_label'>￥</text>
    <text class='content'>{{inputPassword}}</text>
    <view class='className'></view>
  </view>
</view>
<van-transition show="{{ passwordInputHidden }}" name="" duration="{{ { enter: 300, leave: 300 } }}"
  enter-class="van-enter-class" enter-active-class="van-enter-active-class" leave-active-class="van-leave-active-class"
  leave-to-class="van-leave-to-class">
  <view class="keyboardbox">
    <view class="reset-down" bindtap='pay'>
      <van-icon name="arrow-down" size="36rpx" />
    </view>
    <view class='keyboard' bindchange="passwordInputHidden">
      <view class='left number'>
        <view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>
        <view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>
        <view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>
        <view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>
        <view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>
        <view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>
        <view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>
        <view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>
        <view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>
        <view class="zero" data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>
        <view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view>
      </view>
      <view class='right ctr-btn'>
        <view class='ctr-btn-item backout' hover-class='active' hover-stay-time='100' bindtap='clear'>
          <van-icon name="close" />
        </view>
        <view class='ctr-btn-item submit' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>提现
        </view>
      </view>
    </view>
  </view>
</van-transition>

keyboard.wxss

.input_view {
  width: 700rpx;
  height: 500rpx;
  background: #fff;
  margin: 25rpx auto;
  border-radius: 10rpx;
  padding: 40rpx;
  box-sizing: border-box;
}

.title {
  display: block;
  line-height: 90rpx;
  font-size: 30rpx;
  color: #aaa;
}

.input_box {
  display: flex;
  padding: 20rpx 0;
  height: 90rpx;
  border-bottom: 1px solid #efefef;
}

.input_label {
  font-size: 35rpx;
  font-weight: bold;
  margin-right: 5rpx;
}

.content {
  font-size: 80rpx;
  line-height: 90rpx;
  font-weight: bold;
}

.className {
  width: 6rpx;
  height: 90rpx;
  background: #666;
  border-radius: 6rpx;
  animation: twinkling 1s infinite;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both
}

@-webkit-keyframes twinkling {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.pay {
  display: block;
  width: 300rpx;
  height: 90rpx;
  border-radius: 12rpx;
  background: #1dc063;
  color: #fff;
  text-align: center;
  line-height: 90rpx;
  margin: 50rpx auto;
  font-size: 32rpx;
}
.reset-down{
  text-align: center;
  padding: 10rpx;
}
.keyboard {
  width: 100%;
  display: flex;
  background-color: #fff;
  border-top: 10rpx solid #eee;
}

.keyboard .number {
  display: flex;
  width: 570rpx;
  flex-wrap: wrap;
}

.keyboard .number view {
  width: 190rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  font-size: 46rpx;
  font-weight: bold;
  box-sizing: border-box;
  border-left: 10rpx solid #eee;
  border-bottom: 10rpx solid #eee;
}

.keyboard .number .zero {
  width: 380rpx;
}

.keyboard .ctr-btn {
  width: 180rpx;
}
.keyboard .ctr-btn .backout {
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  box-sizing: border-box;
  border-left: 10rpx solid #eee;
  border-right: 10rpx solid #eee;
  border-bottom: 10rpx solid #eee;
}

.keyboard .ctr-btn .submit {
  height: 360rpx;
  line-height: 360rpx;
  text-align: center;
  box-sizing: border-box;
  border-left: 10rpx solid #eee;
  border-right: 10rpx solid #eee;
  border-bottom: 10rpx solid #eee;
  background-color: #1dc063;
}

.keyboard .ctr-btn view .iconfont {
  font-size: 44rpx !important;
  color: #c30;
}

.keyboard .ctr-btn view:nth-child(2) {
  font-size: 46rpx;
  color: #fff;
}

.keyboard .active {
  background-color: #e4e7ed;
}

.activity {
  background-color: #fff;
  padding: 25rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  border-bottom: 10rpx solid #f6f6f6;
}

.activity.activity-item {
  font-size: 26rpx;
}

.arrows-right {
  width: 30rpx;
  height: 30rpx;
}

.arrows-right.active {
  transform: rotate(270deg);
}


.van-enter-active-class,
.van-leave-active-class {
  position: fixed;
  bottom: 0px;
  transition: all;
}

.van-enter-class,
.van-leave-to-class {
  bottom: -100%;
}

keyboard.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputPassword: '', //输入的密码
    passwordInputHidden: true, //hidden是true 默认隐藏
    pay_type: '', //支付方式
    password: 123456, //设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码
    show:false
  },
  isshowone(){
    debugger
    this.setData({
      show:!this.data.show
    })
  },

  pay(e) {
    //你选择的支付方式
    var pay_type = e.currentTarget.dataset.pay_type;
    var _this = this;
    if (pay_type == 'weipay') {
      //此处写入微信支付需要执行的代码不做过多介绍
    } else {
      //内部支付 打开键盘
      _this.passwordInputHidden();
    }
  },


  inputPassword(e) {
    if (this.data.inputPassword.indexOf(".") != -1 && this.data.inputPassword.substring(this.data.inputPassword.indexOf(".") + 1, this.data.inputPassword.length).length == 2) {
      return;
    }
    // 如果当前文本中有 .  并且当前点击的还是 . 就不能再输入了
    if (this.data.inputPassword.indexOf(".") != -1 && e.currentTarget.dataset.key == ".") {
      return;
    }
    // 第一位如果是 0 那么就不能再输入
    if (this.data.inputPassword == "0" && e.currentTarget.dataset.key != '.') {
      return;
    }
    if (this.data.inputPassword == '' && e.currentTarget.dataset.key == '.') {
      e.currentTarget.dataset.key = '0.'
    }

    //键盘输入的密码 赋值给inputPassword
    this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;
    this.setData({
      inputPassword: this.data.inputPassword
    });
  },
  passwordInputHidden() {
    this.setData({
      passwordInputHidden: !this.data.passwordInputHidden //取反 打开关闭小键盘
    });
    this.setData({
      inputPassword: ''
    });
  },
  //删除输入错误的密码
  clear() {
    var index = this.data.inputPassword.length;
    if (index > 0) {
      var inputPassword = this.data.inputPassword.substr(0, index - 1);
      this.setData({
        inputPassword: inputPassword
      });
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

keyboard.json

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index",
    "van-transition": "/miniprogram_npm/vant-weapp/transition/index",
    "van-icon": "/miniprogram_npm/vant-weapp/icon/index"
  }
}