微信小程序自定义键盘

Question

微信小程序中的自定义键盘怎么触发出来呢，有可以直接拿来用的组件吗

Answer 1

触发自定义键盘的展示一般有以下几种方式：

• 绑定点击事件：在输入框的点击事件中设置状态，触发自定义键盘的显示。

• 聚焦事件：在输入框获取焦点的时候（bindfocus事件），切换到自定义键盘。

• 隐藏系统键盘：通过调整输入框的样式（例如设置opacity: 0）保持输入框获得焦点但不显示系统键盘，从而显示自定义键盘。

目前微信小程序官方没有直接拿来用的自定义键盘组件，需要开发者基于小程序的视图容器手动创建。这通常涉及以下步骤：

1. 设计键盘布局：使用微信小程序提供的视图容器组件，如<view>等，来设计键盘的按键布局。</view>

1. 实现键盘逻辑：为不同的按键绑定事件处理函数，比如数字键、删除键、关闭键等。

1. 处理输入数据：当用户点击某个键时，需要更新页面的数据模型，通常会把按键对应的值追加到指定的数据结构中。

1. 控制键盘显示：通过改变自定义键盘的容器视图的hidden属性或者动态样式来控制键盘的显示和隐藏。

举例：

在 WXML 文件中定义自定义键盘：

<view class="custom-keyboard" hidden="{{!keyboardVisible}}">
  <!-- 自定义键盘的按键 -->
  <view class="key" bindtap="keyTap">1</view>
  <view class="key" bindtap="keyTap">2</view>
  <!-- 更多按键... -->
  <view class="key" bindtap="keyTap">0</view>
  <view class="key" bindtap="keyTap">删除</view>
</view>

在 JS 文件中处理点击事件和键盘展示逻辑：

Page({
  data: {
    keyboardVisible: false,
    inputValue: ''
  },
  // 输入框点击事件
  showKeyboard: function () {
    this.setData({ keyboardVisible: true });
    // 可能需要隐藏系统键盘
  },
  // 自定义键盘按键点击事件
  keyTap: function (e) {
    let value = e.currentTarget.dataset.value;
    // 处理数据，比如追加到inputValue
    // ...
    this.setData({ inputValue: updatedValue });
  }
  // 其他逻辑...
});