# KeyboardInputComponent 键盘输入组件

# 概述

KeyboardInputComponent 实现唤起/收起键盘、监听输入事件的能力。

# 注意

一般推荐使用 UITextInput 组件实现文本输入框功能。但如需实现自定义键盘能力，可参阅本文档。

# 唤起/收起键盘

首先要将 KeyboardInputComponent 挂载到 entity 上：

const comp = entity.addComponent(engine.KeyboardInputComponent);

通过 showKeyboard 方法唤起键盘：

comp.showKeyboard({ // 参数与小程序 wx.showKeyboard() 接口一致
  defaultValue: "Hello",
  maxLength: 10,
  multiple: false,
  confirmHold: true,
  confirmType: "done",
});

通过 hideKeyboard 方法收起键盘：

comp.hideKeyboard({
  // 参数与小程序 wx.hideKeyboard() 保持一致
});

# 更新键盘内容

comp.updateKeyboard({
  value: "new text" // 参数与小程序 wx.updateKeyboard() 保持一致
});

# 键盘事件

若要监听键盘事件，推荐在 scriptComponent 自定义组件中进行相关处理。首先要将自定义组件与 KeyboardInputComponent 挂载到同一个 entity 上。

class MyScript extends engine.Script {
  // 自定义组件
}

// 将二者挂载到同一个 entity 上
const comp = entity.addComponent(engine.KeyboardInputComponent);
const myComp = entity.addComponent(MyScript);

在自定义组件中实现相关 on 方法，以实现监听键盘事件：

class MyScript extends engine.Script {
  onKeyboardInput(text) {
    console.log('用户输入了文本：', text);
  }

  onKeyboardComplete(text) {
    console.log('用户完成输入：', text);
  }

  onKeyboardConfirm(text) {
    console.log('用户点击确认按钮，文本是：', text);
  }
}

原理是，KeyboardInputComponent 会自动寻找 entity 内实现了上述 on 方法的组件，并调用这些方法。因此，如需实现自定义的键盘能力，可编写自定义组件，在组件内实现对 KeyboardInputComponent 的方法调用（如唤起键盘）和键盘事件监听。