如何实现一个验证码输入框的功能

Creator 3.x
#1

  • Creator 版本：3.7.2

  • 目标平台： web-mobile

  • 功能，想要实现一个6位数的输入验证码功能，如下图
    企业微信截图_17256202771430

  • 要求：
    1、 能够实现连续输入，即在第一个框内输入数字后光标自动移动到下一格
    2、 连续删除
    3、 粘贴功能，即如果复制过来的验证码，粘贴自动填满6个格子（6个EditBox）。
    目前已经实现了1和3，但是2还不知道如何实现。
    我尝试对键盘进行监听，但是键盘监听在EditBox中好像没有作用。
    也尝试对EditBox添加textChange的监听，但是当EditBox的内容为空时，这个监听也没用，光标无法前移。
    希望各位大佬能够多多指教。

#2

判断字符串长度

#3

你被表象所迷惑了，这看上去是6个输入框，你就弄了6个输入框。

不妨考虑一下，其实只有一个输入框，其他全是根据输入内容来重新绘制的。

具体操作如下：

  1. 只用一个EditBox ，其大小包括你这6个输入框，使当点击这6个输入框任何一个时，都能触发这个 EditBox 输入
  2. 当触发这个 EdiBox 的输入时
    1. EditBox实际的Label组件所在的节点透明度为0，使输入的文字看不见
    2. 同时监听 EditBox 的内容变更监听，根据内容更新，重新绘制你想要的效果，比如你这里，根据输入的文字，更新到你的6个输入框中（此时这6个输入框只是看起来是EditBox，实际他们都是Label）
2赞
#4

我现在就这样做的:joy:，但是实际上在 web 是一个标签需要特殊处理，而原生我还没测过

#5

这样做还会有个问题，无法单独的修改某一个字符

#6

可以判断触位置算哪个数字吗

#7

思维敏捷 :smile:

#8

这个方法不行

#9

监听6个label的背景图，点到第一个就是0索引，点到第二个就是1索引，然后根据索引位置修改字符串，或者监听那个editbox判断点击坐标处于哪个位置

#10

或者可以考虑不用editbox，6个都是按钮，点了之后唤起一个自制的简易键盘