小程序自己定义键盘

最新推荐文章于 2025-07-11 13:15:29 发布

weixin_34124651

最新推荐文章于 2025-07-11 13:15:29 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ca31443e51d4532037e636e

本文介绍了如何在小程序中自定义键盘，适用于输入特定字符的场景，如手机号、车牌号等。通过创建组件并设置回调方法，实现键盘样式自由定制和功能控制，解决了调用系统键盘可能遇到的问题。代码已上传至GitHub，供读者参考和进一步开发。

自定义键盘功能

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

适用场景

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

实现原理

实现原理其实非常简单，首先创建一个组件，这个组件里放的就是键盘的样式和一些回调方法。之后在你要用到输入的地方写一个假键盘, 注意不是写一个输入框（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=