微信小程序-自定義鍵盤

本來是想使用小程序的input組件 但它直接調起系統鍵盤或微信內置的鍵盤 不能實現一些自定義的功能 所以只好自己做一個鍵盤出來了

第一步是寫一個數字鍵盤出來(其他鍵盤同理) 難也不難。

 

 

 

 wxml:  圖標是iconfont

<view class="keyboard">
 <view class="keyboard-line">
  <view bindtap="_cancelNumber" style="width: 37%;">
    <view class="input-btn inputCancel" hover-class='active' hover-stay-time='100'>取消</view>
  </view>
  <view bindtap="_confirmNumber" hover-class='active' hover-stay-time='100' style="padding-right: 0;">
    <view class="input-btn inputConfirm" hover-class='active' hover-stay-time='100'>確認</view>
  </view>
 </view>

 <view class="keyboard-line">
   <view wx:for="{{'123'}}" wx:for-item="number" data-number="{{number}}" bindtap="_inputNumber" >
    <view class="input-btn" hover-class='active' hover-stay-time='100'>{{number}}</view>
   </view>
 </view>

 <view class="keyboard-line">
  <view wx:for="{{'456'}}" wx:for-item="number" data-number="{{number}}" bindtap="_inputNumber">
    <view class="input-btn" hover-class='active' hover-stay-time='100'>{{number}}</view>
  </view>
 </view>

<view class="keyboard-line">
  <view wx:for="{{'789'}}" wx:for-item="number" data-number="{{number}}" bindtap="_inputNumber">
    <view class="input-btn" hover-class='active' hover-stay-time='100'>{{number}}</view>
  </view>
 </view>

 <view class="keyboard-line">
  <view ></view>
  <view data-number="0" bindtap="_inputNumber">
    <view class="input-btn" hover-class='active' hover-stay-time='100'>0</view>
  </view>
  <view bindtap="_delNumber">
    <view class="input-btn delInput">
      <text class="iconfont icon-del"></text>
    </view>
  </view>
 </view>
</view>

　　wxss:

.keyboard {
  padding: 14rpx;
  background:rgba(210,214,220,1);
  box-sizing: border-box;
  transition: all 400ms ease-in-out;
}
.keyboard-line {
  display: flex;
}

.keyboard-line>view {
  width: 100%;
  padding: 7rpx;
}
.keyboard-line>view:nth-of-type(1) {
  padding-left: 0;
}
.keyboard-line>view:nth-of-type(3) {
  padding-right: 0;
}

.input-btn {
  height: 104rpx;
  border-radius: 13rpx;
  background: rgba(255,255,255,1);
  font-size: 45rpx;
  font-weight: 400;
  color: rgba(3,3,3,1);
  line-height: 104rpx;
  text-align: center;
}

.inputCancel {
  color: rgba(136,136,136,1);
  font-size: 32rpx;
}

.inputConfirm {
  background: rgba(68,167,239,1);
  color: #fff;
  font-size: 32rpx;
}

.delInput {
  background: none;
}

.active {
  background:rgba(162,171,183,1);
}

　js部分只是對按鈕的點擊做處理 沒什么好說的。

鍵盤搞定之后 就是輸入框的處理了 這里倒是卡了一下 難點有兩個 模擬的是 橫向的文字輸入

1、模擬出光標閃爍，並且光標要一直緊跟在輸入文本的最后。

2、展示輸入文本的view長度最長假如是100rpx 如果輸入的內容超過這個長度 不能簡單的用overflow:scroll來處理 這樣頁面上只會展示最先輸入的部分，最新輸入的部分被遮擋。

 

我對於問題的解決思路：

問題1：小程序里面可以寫動畫 所以只要寫個動畫控制 光標樣式對應的view的透明度就OK了。

問題2：小程序當中提供了 scroll-view 這個組件 它有個屬性 scroll-into-view  描述是：值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素。按照這個屬性的描述 也就是說只要把最新輸入的文字 新建一個子元素 設置好id 對應的修改scroll-into-view的值為這個id 就可以直接定位到最新輸入的文字了。

<scroll-view scroll-into-view="{{toText}}" scroll-x="true">
    <text wx:for="{{content}}" wx:for-index="k" wx:for-item="text" wx:key="k" id="{{'n' + k}}">{{text}}</text>
</scroll-view>　　

toText隨着content的變化在js當中修改它的值就可以了。

 

最終效果雖然看起來表面上和input框沒什么太大差別，有個問題是 不能像input一樣 把光標移動到輸入內容的中間去 光標只能固定在末尾。依我這個剛轉半年前端實力來說 也就只能做到這個程度了，期待以后能完美實現input

that's all.

 

 

 

剛轉前端不久 有哪里不對 歡迎指出