自定義鍵盤功能

這個鍵盤的樣式可以自己隨便定義，功能只能實現簡單的數字字母或指定漢字的輸入。不能輸入拼音拼出漢字。

適用場景

這個鍵盤的適用場景就是一些特定的需要輸入指定字母或漢字的地方，比如輸入用戶手機號，再比如輸入各個省的車牌號首位，再比如輸入飛機航班號。寫這個鍵盤的原因就是在支付寶小程序里調用鍵盤會出現很多問題。而且不好控制。自己寫鍵盤不僅避免了很多坑，而且樣式可以隨便自己定義，方便。

實現原理

實現原理其實非常簡單，首先創建一個組件，這個組件里放的就是鍵盤的樣式和一些回調方法。之后在你要用到輸入的地方寫一個假鍵盤, 注意不是寫一個輸入框（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> <!--適配iPhoneX的底條--> <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

總結

以上是生活随笔為你收集整理的小程序自己定义键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。