Nanfeng

Notes on software development, code, and curious ideas

Building a Six-Digit Verification Code Dialog in Cocos Creator

In
Implement a six-digit code input that supports continuous typing, pasting, and deletion.
  • Cocos Creator: 2.7.2
  • Language: TypeScript

The dialog supports continuous entry, pasting, and continuous deletion of a six-digit verification code.

Result

Place six visual boxes with Label children in the dialog and use one EditBox as the actual input. Clicking any visual box focuses the EditBox. Its change listener distributes characters across the Labels.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
this._view._EditBoxC_input.node.on('text-changed', this.input, this);
this._view._LayC_input.node.children.forEach((node, index) => {
    node.on(Node.EventType.TOUCH_END, this.inputImg.bind(this, index), this);
});

private input(event) {
    const inputText = event.string;
    this._view._LayC_input.node.children.forEach((node, index) => {
        const label = node.getChildByName('Label').getComponent(Label);
        label.string = inputText[index] || '';
    });
}

private inputImg() {
    this._view._EditBoxC_input.focus();
}

This achieves the desired behavior, but does not allow editing one individual visual box directly.

+