小程序自己定义键盘

柔光的暖阳◎ 2022-10-01 05:39 383阅读 0赞

#### 自定义键盘功能 ####

这个键盘的样式可以自己随便定义，功能只能实现简单的数字字母或指定汉字的输入。不能输入拼音拼出汉字。

#### 适用场景 ####

这个键盘的适用场景就是一些特定的需要输入指定字母或汉字的地方，比如输入用户手机号，再比如输入各个省的车牌号首位，再比如输入飞机航班号。写这个键盘的原因就是在支付宝小程序里调用键盘会出现很多问题。而且不好控制。自己写键盘不仅避免了很多坑，而且样式可以随便自己定义，方便。

#### 实现原理 ####

实现原理其实非常简单，首先创建一个组件，这个组件里放的就是键盘的样式和一些回调方法。之后在你要用到输入的地方写一个**假键盘**, 注意不是写一个输入框（Not input）,就是写一个view，来实时显示用户输入的数据。

在组件里编写一个数组，数组里存放键盘要输入的字，之后吧数组的内容遍历到键盘上，每一个按键加一个点击事件，点击的时候吧点击的内容传给调用他的父元素，父元素接受回调实时同步到自己写的假input上整个功能就实现了。其实很简单。

基本功能算是实现了，如果想要优化的话，可以继续增加功能，比如长按粘贴，长按清楚建清空，根据安卓和IOS给与不同样式等等。

#### 代码分享 ####

GitHub地址： [keyboard][]

一些基本的开关，回调会在GitHub上写清楚，这只是一个思路，没有局限性的，你可以在这基础上写出很多花样。

### 代码（需要代码请去github地址）: ###

html：

<view a:if="{ {isShow}}" class="vehicle-panel" style="height:488rpx;bottom:{ {bottom}}">
      
      <view class="number-panel-box" a:if="{ {keyBoardType == 2}}">
        <view class="number-panel-row">
          <view class='number-panel-row-key vehicle-hover' onTap='vehicleTap' a:for="{ {keyPhone}}" data-value="{ {item}}" key="{ {item}}">
            {
        {item}}
          </view>
          <view onLongTap="longPressDelete" onTap='vehicleTap' class='number-panel-row-button vehicle-hover' data-value="delete">
            <image src='../../image/airport-card/delete.png' class='vehicle-en-button-delete' mode='aspectFit'>删除</image>
          </view>
        </view>
      </view>
      
      <block class="letter-panel-box" a:if="{ {keyBoardType == 1}}">
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-panel-row-button-number vehicle-hover' onTap='vehicleTap' a:for="{ {keyNumber}}" data-value="{ {item}}" key="{ {item}}">
            {
        {item}}
          </view>
        </view>
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-hover' a:for="{ {keyEnInput1}}" onTap='vehicleTap' data-value="{ {item}}" key="{ {item}}">
            {
        {item}}
          </view>
        </view>
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-hover' a:for="{ {keyEnInput2}}" onTap='vehicleTap' data-value="{ {item}}" key="{ {item}}">
            {
        {item}}
          </view>
          <view onLongTap="longPressDelete" class='vehicle-panel-row-button vehicle-panel-row-button-img vehicle-hover'>
            <image src='../../image/airport-card/delete.png' class='vehicle-en-button-delete' onTap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
          </view>
        </view>
        <view class="vehicle-panel-row-last">
          <view class='vehicle-panel-row-button vehicle-panel-row-button-last vehicle-hover' onTap='vehicleTap' a:for="{ {keyEnInput3}}" data-value="{ {item}}" key="{ {item}}">
             {
        {item}}
          </view>
          <view class='vehicle-panel-row-button vehicle-panel-ok' onTap='vehicleTap' data-value="ok">
            确认</view>
        </view>
      </block>
    </view>
    
    <view class="adaptive" a:if="{ {isAdaptive}}"></view>
    
    复制代码

js:

Component({
      mixins: [],
      data: {
        keyNumber: [1,2,3,4,5,6,7,8,9,0],
        keyEnInput1: ['Q','W','E','R','T','Y','U','I','O','P'],
        keyEnInput2: ['A','S','D','F','G','H','J','K','L'],
        keyEnInput3: ['Z','X','C','V','B','N','M'],
        keyPhone: [1,2,3,4,5,6,7,8,9,"+",0],
        bottom:'0'
      },
      props: {
        isShow: false,
        keyBoardType: 1,//键盘样式 “1” 为数字英文键盘 “2” 为数字键盘
        backgroundColor:"#fff",
        onInputChange:(val)=>{},
        onIputdelete:()=>{},
        onInputOk:()=>{},
        isAdaptive:false,
        onLongPressDelete:()=>{}
      },
      didMount() {
        if(this.props.isAdaptive){
          this.setData({
            bottom:'60rpx'
          })
        }else{
          this.setData({
            bottom:'0'
          })
        }
      },
      methods: {
        vehicleTap: function (event) {
          // console.log(event,'....')
          let val = event.target.dataset.value;
          switch (val){
            case 'delete':
              this.props.onIputdelete(val);
              this.props.onInputChange(val);
            break;
            case 'ok':
              this.props.onInputOk(val);
            break;
            default:
              this.props.onInputChange(val);
          }
        },
        longPressDelete(){
          //长按清除
          this.props.onLongPressDelete()
        },
      }
    });
    复制代码

css:

/* 数字键盘样式 */
    .number-panel-box {
      display: flex;
      width: 750rpx;
    }
    .number-panel-row {
      display: flex;
      background: rgba(210,213,219,0.90);
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 7rpx;
      padding-bottom: 0;
    }
    .number-panel-row-key {
      background-color: #fff;
      margin: 7rpx;
      padding: 5rpx;
      width: 220rpx;
      height: 94rpx;
      text-align: center;
      line-height: 94rpx;
      border-radius: 10rpx;
      box-shadow: 0 1px 0 0 rgba(0,0,0,0.35);
      font-size: 50rpx;
    }
    .number-panel-row-button {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(210,213,219,0.90);
      width: 220rpx;
      height: 94rpx;
      border-radius: 10rpx;
      margin: 7rpx;
      padding: 5rpx;
    }
    .number-panel-img image {
      width: 70rpx;
      height: 105rpx;
    }
    /* 字母键盘样式 */
    .vehicle-panel {
      width: 100%;
      position: fixed;
      left: 0;
      z-index: 1000;
      background: #D2D5DB;
      overflow: hidden;
      box-sizing: border-box;
    }
    .letter-panel-box {
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .vehicle-panel-row {
      display: flex;
      justify-content: space-between;
      padding-top: 10rpx;
      align-items: center;
    }
    .vehicle-panel-row-last{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 35rpx;
      padding-top: 10rpx;
    }
    .vehicle-panel-row-button {
      background-color: #fff;
      margin: 5rpx;
      padding: 5rpx;
      width: 63rpx;
      height: 84rpx;
      text-align: center;
      line-height: 86rpx;
      font-size: 46rpx;
      background: #FFFFFF;
      box-shadow: 0 2rpx 0 0 rgba(0,0,0,0.35);
      border-radius: 10rpx;
    }
    .vehicle-panel-row-button-last {
      width: 85rpx;
      height: 84rpx;
      line-height: 86rpx;
    }
    .vehicle-hover:active {
      background-color: #ccc;
    }
    .vehicle-panel-row-button-img {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(171,179,189,0.50);
    }
    .vehicle-en-button-delete {
      width: 46rpx;
      height: 34rpx;
    }
    .vehicle-panel-row-button-img:active{
      background-color: #fff;
    }
    .vehicle-panel-ok {
      background-color: #4287FF;
      width: 180rpx;
      height: 84rpx;
      font-family: 'PingFangSC-Medium';
      font-size: 32rpx;
      color: #fff;
    }
    .vehicle-panel-ok:active{
      background-color: #4B71E6;
    }
    .adaptive{
      width: 750rpx;
      height: 60rpx;
      background: #D2D5DB;
      position: absolute;
      z-index: 999;
      left: 0;
      bottom: 0
    }
    复制代码

转载于:https://juejin.im/post/5ca31443e51d4532037e636e

[keyboard]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FShallowLan%2Fkeyboard