EditBox 组件参考

EditBox 是一种文本输入组件,该组件让你可以轻松获取用户输入的文本。

editbox

点击 属性检查器 下面的 添加组件 按钮,然后从 UI/EditBox 即可添加 EditBox 组件到节点上。

EditBox 的脚本接口请参考 EditBox API

关于使用可以参考范例 EditBoxGitHub | Gitee)。

EditBox 属性

属性功能说明
BackgroundImage输入框背景节点上挂载的 Sprite 组件对象
FontColor输入框文本的颜色
FontSize输入框文本的字体大小
InputFlag指定输入标识:可以指定输入方式为密码或者单词首字母大写(仅支持 Android 平台)
InputMode指定输入模式:ANY 表示多行输入,其它都是单行输入,移动平台上还可以指定键盘样式。
LineHeight输入框文本的行高
MaxLength输入框最大允许输入的字符个数
Placeholder输入框占位符的文本内容
PlaceholderFontColor输入框占位符的文本字体颜色
PlaceholderFontSize输入框占位符的文本字体大小
PlaceholderLabel输入框占位符节点上挂载的 Label 组件对象
ReturnType指定移动设备上面回车按钮的样式
String输入框的初始输入内容,如果为空则会显示占位符的文本
TabIndex修改 DOM 输入元素的 tabIndex,这个属性只有在 Web 上面修改有意义。
TextLabel输入框输入文本节点上挂载的 Label 组件对象

EditBox 事件

editbox-event

事件结构参考:组件事件结构

  • Editing Did Began:该事件在用户点击输入框获取焦点的时候被触发。
  • Editing Did Ended:在单行模式下面,一般是在用户按下回车或者点击屏幕输入框以外的地方调用该函数。
    如果是多行输入,一般是在用户点击屏幕输入框以外的地方调用该函数。
  • Text Changed:该事件在用户每一次输入文字变化的时候被触发。但若是通过 EditBox.stringsetter 设置时不会派发该事件。

详细说明

  • 如果需要输入密码,则需要把 Input Flag 设置为 password,同时 Input Mode 必须是 Any 之外的选择,一般选择 Single Line。
  • 如果要输入多行,可以把 Input Mode 设置为 Any。
  • 背景图片支持九宫格缩放

通过脚本代码添加回调

方法一

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,都是通过代码添加。首先需要构造一个 EventHandler 对象,然后设置好对应的 targetcomponenthandlercustomEventData 参数。

  1. import { _decorator, Component, EditBox, EventHandler } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. @ccclass("example")
  4. export class example extends Component {
  5. onLoad() {
  6. const editboxEventHandler = new EventHandler();
  7. editboxEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
  8. editboxEventHandler.component = 'example';
  9. editboxEventHandler.handler = 'onEditDidBegan';
  10. editboxEventHandler.customEventData = 'foobar';
  11. const editbox = this.node.getComponent(EditBox);
  12. editbox.editingDidBegan.push(editboxEventHandler);
  13. // 你也可以通过类似的方式来注册其它回调函数
  14. // editbox.editingDidEnded.push(editboxEventHandler);
  15. // editbox.textChanged.push(editboxEventHandler);
  16. // editbox.editingReturn.push(editboxEventHandler);
  17. }
  18. onEditDidBegan(editbox, customEventData) {
  19. // 这里 editbox 是一个 EditBox 对象
  20. // 这里的 customEventData 参数就等于你之前设置的 "foobar"
  21. }
  22. // 假设这个回调是给 editingDidEnded 事件的
  23. onEditDidEnded(editbox, customEventData) {
  24. // 这里 editbox 是一个 EditBox 对象
  25. // 这里的 customEventData 参数就等于你之前设置的 "foobar"
  26. }
  27. // 假设这个回调是给 textChanged 事件的
  28. onTextChanged(text, editbox, customEventData) {
  29. // 这里的 text 表示修改完后的 EditBox 的文本内容
  30. // 这里 editbox 是一个 EditBox 对象
  31. // 这里的 customEventData 参数就等于你之前设置的 "foobar"
  32. }
  33. // 假设这个回调是给 editingReturn 事件的
  34. onEditingReturn(editbox, customEventData) {
  35. // 这里 editbox 是一个 EditBox 对象
  36. // 这里的 customEventData 参数就等于你之前设置的 "foobar"
  37. }
  38. }

方法二

通过 editbox.node.on('editing-did-began', ...) 的方式来添加

  1. // 假设我们在一个组件的 onLoad 方法里面添加事件处理回调,在 callback 函数中进行事件处理:
  2. import { _decorator, Component, EditBox } from 'cc';
  3. const { ccclass, property } = _decorator;
  4. @ccclass("example")
  5. export class example extends Component {
  6. @property(EditBox)
  7. editbox: EditBox | null = null;
  8. onLoad(){
  9. this.editbox.node.on('editing-did-began', this.callback, this);
  10. }
  11. callback(editbox: EditBox){
  12. // 回调的参数是 editbox 组件,注意这种方式注册的事件,无法传递 customEventData
  13. }
  14. }

同样的,你也可以注册 editing-did-endedtext-changedediting-return 事件,这些事件的回调函数的参数与 editing-did-began 的参数一致。