cocosCreator实现一个验证码弹窗验证功能

在 Cocos Creator 中实现一个6位数的验证码输入弹窗功能。主要包含以下三点 1、 可以连续输入验证码 2、 可以粘贴验证码 3、 可以连续删除验证码

(adsbygoogle = window.adsbygoogle || []).push({});

前言

引擎版本: Cocos Creator 2.7.2 开发语言: ts

效果图

实现思路

1、 在弹窗界面放置6个输入框的精灵，每个精灵添加一个Label的子节点，放置一个EditBox。 2、 给6个输入框添加点击事件，不管点击哪个框，都聚焦到EditBox，触发EditBox的输入。 3、 监听EditBox的内容变更，将更新后的文本绘制到对应的输入框的Label上

缺点

1、 无法单独修改某一个输入框中的文本

示例代码

监听代码

代码语言：javascript复制

this._view._EditBoxC_input.node.on('text-changed', this.input, this);  // 监听EditBox内容变更
this._view._LayC_input.node.children.map((v, i) => {
    v.on(Node.EventType.TOUCH_END, this.inputImg.bind(this, i), this);   // 6个输入框的点击事件
})

EditBox监听

代码语言：javascript复制

private input(event) {
     let inputText = event.string;
     this._view._LayC_input.node.children.map((v, i) => {
          v.getChildByName("Label").active = true;
          if (inputText[i]) {
               v.getChildByName("Label").getComponent(Label).string = inputText[i];
          } else {
               v.getChildByName("Label").getComponent(Label).string = "";
       }
     })
}

输入框点击

代码语言：javascript复制

private inputImg(index, event) {
     this._view._EditBoxC_input.focus();   // 聚焦到EditBox
}

上面基本能够实现我想要的效果，如果你有更好的方法，欢迎交流。

开发 事件 验证码 input label

0 人点赞