微信小程序中怎么自定义一个键盘

这期内容当中小编将会给大家带来有关微信小程序中怎么自定义一个键盘 ，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网页空间、营销软件、网站建设、肃北网站维护、网站推广。

 
 
  
  微信
  
 
 
  
  会员卡
  
 
 
  
  零钱
  
 

 

 
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
 
 请输入支付密码(
  -￥100)
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   X
   0
   .
  
  
   
    
   
   取消
  
 

CSS: 

.popup-memu {
 width: 100%;
 background-color: white;
 border-top: 1px solid #dedbd5;
 border-bottom: 1px solid #eee;
 display: block;
}
 
.line {
 background-color: #eee;
 margin-left: 10px;
 height: 1px;
 margin-right: 10px;
}
 
.popup-memu {
 height: 50px;
 font-size: 15px;
 line-height: 50px;
 border-bottom: 1px solid #eee;
}
 
.payMode {
 display: flex;
 background: #fff;
 align-items: center;
 border-bottom: 2px solid #eee;
}
 
.payMode image {
 width: 30px;
 height: 30px;
 margin-left: 18px;
 margin-right: 10px;
}
 
.sheet-content {
 background-color: #fff;
 padding: 0 15rpx;
}
/* 键盘 */
.password-input {
 display: flex;
 width: 660rpx;
 border: 1px solid #ddd;
 margin: 0 auto;
 margin-top: 50rpx;
 background-color: #fff;
 border-radius: 3px;
}
 
.password-input view {
 width: 110rpx;
 height: 80rpx;
 display: flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 border-right: 1px solid #ccc;
}
 
.password-input view:nth-child(6) {
 border-right: none;
}
 
.password-input view text {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: #333;
}
 
.tips {
 font-size: 28rpx;
 text-align: center;
 margin-top: 5px;
}
 
.tips text {
 color: #c30;
}
 
.keyboard {
 width: 100%;
 display: flex;
 background-color: #fff;
 border-top: 1px solid #eee;
 margin-top: 50rpx;
}
 
.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-right: 1px solid #eee;
 border-bottom: 1px solid #eee;
}
 
.keyboard .ctr-btn {
 width: 180rpx;
}
 
.keyboard .ctr-btn view {
 height: 240rpx;
 line-height: 240rpx;
 text-align: center;
 box-sizing: border-box;
 border-bottom: 1px solid #eee;
}
 
.keyboard .ctr-btn view .iconfont {
 font-size: 44rpx !important;
 color: #c30;
}
 
.keyboard .ctr-btn view:nth-child(2) {
 font-size: 46rpx;
 color: #c30;
}
 
.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: 1px solid #f6f6f6;
}
 
.activity.activity-item {
 font-size: 26rpx;
}
 
.arrows-right {
 width: 30rpx;
 height: 30rpx;
}
 
.arrows-right.active {
 transform: rotate(270deg);
}
/* 键盘结束 */

 js:

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  inputPassword: '', //输入的密码
  passwordInputHidden: true,//hidden是true 默认隐藏
  pay_type: '',//支付方式
  password: 123456,//设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 
 pay(e) {
  //你选择的支付方式
  var pay_type = e.currentTarget.dataset.pay_type;
  var _this = this;
  if (pay_type == 'weipay') { 
   //此处写入微信支付需要执行的代码不做过多介绍
  } else { 
   //内部支付 打开键盘
   _this.passwordInputHidden();
  }
 },
 
 
 inputPassword(e) {
  //键盘输入的密码 赋值给inputPassword
  this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;
  this.setData({
   inputPassword: this.data.inputPassword
  });
  //当输入密码正确时 
  if (this.data.inputPassword.length == 6 && this.data.password == this.data.inputPassword) {
  
   this.passwordInputHidden();//关闭小键盘
  }
   //当输入密码错误时 给个提示 并且把输入的密码清零
  if (this.data.inputPassword.length == 6 && this.data.password != this.data.inputPassword) {
   wx.showModal({
    title: "提示",
    content: "输入密码错误",
   })
   this.setData({
    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
   });
  }
 },
 
})

上述就是小编为大家分享的微信小程序中怎么自定义一个键盘 了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。