EditBox Component Reference

    Click the Add Component button at the bottom of the Inspector panel and select UI/EditBox to add the EditBox component to the node.

    editbox-event

    For event structure you can refer to the Button documentation.

    • Editing Did Began: This event will be triggered when the user clicks on the EditBox.
    • Editing Did Ended: This event will be triggered when the EditBox loses focus.
      • When in single line input mode, it’s triggered after user presses Enter key or clicks the area outside of EditBox.
    • Text Changed: This event will be triggered when the content in EditBox is changed each time.
    • If you want to input password, you need set Input Flag to PASSWORD and the Input Mode mustn’t be ANY, usually we use Single Line.
    • If you want to enable multiline input support, you can set the Input Mode to Any.
    • The background image of EditBox support 9-slicing sprite frame, you could customize the border as you did in Sprite component.

    Method two

    Added with Node‘s event API .

    1. // Suppose we add an event handler callback inside a component's onLoad method and event handlers in the callback function.
    2. import { _decorator, Component, EditBoxComponent } from 'cc';
    3. const { ccclass, property } = _decorator;
    5. @ccclass("example")
    6.     @property(EditBoxComponent)
    7.     editbox: EditBoxComponent | null = null;
    8.     onLoad(){
    10.     }
    12.     callback(editbox: EditBoxComponent){
    13.         // The callback parameter is the EditBox component, note that events registered this way cannot pass customEventData.
    14.     }

    Similarly, you can register events such as editing-did-ended, text-changed, editing-return, etc. The parameters of the callback function for these events are consistent with the parameters of .