在 Cocos Creator 中实现一个6位数的验证码输入弹窗功能。主要包含以下三点
1、 可以连续输入验证码
2、 可以粘贴验证码
3、 可以连续删除验证码
前言
引擎版本: Cocos Creator 2.7.2
开发语言: ts
效果图
实现思路
1、 在弹窗界面放置6个输入框的精灵,每个精灵添加一个Label的子节点,放置一个EditBox。
2、 给6个输入框添加点击事件,不管点击哪个框,都聚焦到EditBox,触发EditBox的输入。
3、 监听EditBox的内容变更,将更新后的文本绘制到对应的输入框的Label上
缺点
1、 无法单独修改某一个输入框中的文本
示例代码
监听代码
1 | this._view._EditBoxC_input.node.on('text-changed', this.input, this); // 监听EditBox内容变更 |
EditBox监听
1 | private input(event) { |
输入框点击
1 | private inputImg(index, event) { |
上面基本能够实现我想要的效果,如果你有更好的方法,欢迎交流。