在微信小程序中做自己的数字键盘

微信小程序 专栏收录该内容
8 篇文章 0 订阅

为什么要自制键盘?

我最近在开发一款微信小程序,现在需要用户输入一个数字。

使用系统键盘带来的不便

如果使用系统键盘,有以下几个问题:

  • 数字键太小,不方便;
  • 无法阻止用户输入不合法字符(如:“&”);
  • 小数点在一些手机上很难找到;
  • 用户需要点击输入框;
  • 无法控制按钮样式。

理想的自制键盘效果

123
456
789
.0提交
退格清空

怎样自制键盘?

每一行按钮捆绑成一个view:
WXML

<!--pages/a/a.wxml-->
<!--输入键盘-->
<!--五行,每行一个view-->
<view class='keyboard-row'>
  <button type='default' plain='true' class='one' data-key='1'  bindtap='tapKey'>1</button>
  <button type='default' plain='true' class='two' data-key='2' bindtap='tapKey'>2</button>
  <button type='default' plain='true' class='three' data-key='3' bindtap='tapKey'>3</button>
</view>
<view class='keyboard-row'>
  <button type='default' plain='true' class='four' data-key='4' bindtap='tapKey'>4</button>
  <button type='default' plain='true' class='five' data-key='5' bindtap='tapKey'>5</button>
  <button type='default' plain='true' class='six' data-key='6' bindtap='tapKey'>6</button>
</view>
<view class='keyboard-row'>
  <button type='default' plain='true' class='seven' data-key='7' bindtap='tapKey'>7</button>
  <button type='default' plain='true' class='eight' data-key='8' bindtap='tapKey'>8</button>
  <button type='default' plain='true' class='nine' data-key='9' bindtap='tapKey'>9</button>
</view>
<view class='keyboard-row'>
  <button type='default' plain='true' class='dot' data-key='.' bindtap='tapKey'>.</button>
  <button type='default' plain='true' class='zero' data-key='0' bindtap='tapKey'>0</button>
  <button type='default' plain='true' class='submit' bindtap='tapSubmit'>提交</button>
</view>
<!--clear&delete-->
<view class='keyboard-row'>
  <button type='default' plain='true' class='del'  bindtap='tapDel'>退格</button>
  <button type='default' plain='true' class='clear' bindtap='tapClear'>清除</button>
</view>

WXSS

/*pages/a/a.wxss*/
.keyboard-row {
  width: 100%;
  height: 35%;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

JS

// pages/a/a.js
Page({
  data: {
    num: 0,
    hasDot: false // 防止用户多次输入小数点
  },
  tapKey: function(evt) {
    var x = evt.currentTarget.dataset.key
    if(x == '.') {
      if(this.data.hasDot) return
      this.setData({
        hasDot: true
      })
    }
    this.setData({
      num: this.data.num == '0'? x: this.data.num + x
    })
  },
  tapSubmit: function() {
    // 用户已提交
    console.log('res =', this.data.num)
  },
  tapDel: function() {
    if(this.data.num == '0') return
    if(this.data.num[this.data.num.length - 1] == '.') this.setData({
      hasDot: false
    })
    this.setData({
      num: this.data.num.length == 1? '0': this.data.num.substring(0, this.data.num.length - 1)
    })
  },
  tapClear: function() {
    this.setData({
      num: '0',
      hasDot: false
    })
  }
})

键盘的效果

在这里插入图片描述

  • 6
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值