UGUI实现4位验证码输入
原本在电脑上开发一个验证码功能不是什么难题,4个InputField就搞定了,依次监听InputField的onValueChanged,当value.length == 1时跳转至下一个InputField,并ActiveField即可。
但是到了手机上,跳转至下一个InputField时,手机键盘会收缩,然后再弹出,然而,手机上的键盘如果间隔过短,会出现收回后不再弹出的情况。即使设置了0.2秒的间隔,也会因为手机键盘反复伸缩导致用户输入验证码出现间断感,极大降低了体验。
那么有没有办法实现这个功能呢?当然有啦!
虽然说NGUI完全可以通过设置字间距来完成,但是UGUI的InputField并没有这样的属性。因此,得通过一些黑科技来实现。
此外,其他大佬用代码实现了UGUI的InputField的字间距设置,但是本篇主要是讲述黑科技方法。
先看下这个预制体结构:
在这个InputField下添加了4个VCode(UnityEngine.UI.Text)组件,并在对应的下方添加了一个Line(Image)的子物体,用来做下划线。(每当一位验证码输入完成后,跳转至下一个Text组件显示新的验证码,切已输入的验证码的下划线变成蓝色)
是不是有思路了,没错,就是用4个Text组件来显示验证码,而InputField这是用来接收用户输入而已(不显示输入结果)。
这样的情况下,不会因为跳转InputField导致手机键盘反复伸缩或间隔过小而导致手机键盘不再弹出等问题。
每当用户输入的验证码位数发生变化,则将对应的位数赋给对应的Text,这样就做到了只使用1个InputField来输入4位验证码,而无需关心验证码之间的间距长度了。
既然逻辑构思好了,代码就不难了。
using System; using System.Collections; using System.Collections.Generic; using System.Text; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class VerifyCodePanel : ILoginChild { public const int VERIFY_CODE_LENGTH = 4; public InputField VCodeInput; public Text[] VCodes = new Text[VERIFY_CODE_LENGTH]; //外部选择蓝色与灰色,分别表示已输入(Blue)和未输入(Gray) public Color Blue; public Color Gray; private int m_lastVcodeLength = 0; void Start() { //外部设置VCodeInput等组件,或使用代码获取,这必须在初始化或之前设置完成 //UIUtility是自己实现的一个针对UI组件获取与绑定的一个工具 VCodeInput = UIUtility.GetChildControl<InputField>("VCodeInput", transform); BindUIEvents(); } private void BindUIEvents() { //绑定VCodeInput的值变化,外部绑定和代码绑定皆可,这里使用的是自己实现的一个UI工具 UIUtility.BindUIEvent(EventTypeEnum.InputFieldOnValueChanged, OnVCodeValueChanged, VCodeInput.transform); } // 监听输入的字符变化 private void OnVCodeValueChanged(string value) { //外部已经设置好VCodeInput的长度限制,最多为4,但是为了避免意外情况,限制字符长度 if (value.Length < 0 || value.Length > 4) { return; } //判断字符是边长了还是变短了,用以决定Text的跳转方向 bool next = false; //分割字符,默认为空,如果是长度增加,则说明输入了新的验证码,将这个验证码记录下来 string character = string.Empty; //比较与上一次输入的验证码长度,缺省长度为0 if(value.Length > m_lastVcodeLength) { next = true; character = value[value.Length - 1].ToString(); } m_lastVcodeLength = value.Length; int which = value.Length - 1; OnMoveCursor(next, which, character); } //移动光标(实际上是操作用来显示验证码的Text) private void OnMoveCursor(bool next, int which, string character) { //将值赋给对应的Text if (next) { VCodes[which].text = character; SetLineColor(which, Blue); } else { /*这里比较绕,如果是回退,则说明当前的which其实是已经退格后的位数, * 比如说,原本是输入了123,退格后则变成了12, * 那么which的值为value.length - 1 = 1; value.length为2 * 而我们需要将原本第三位(从0开始计数,值为2)的Text设置为空 * 因此需要i + 1,而为了避免用户全选并删除所有验证码的情况,需要遍历 */ for (int i = which; i < VERIFY_CODE_LENGTH - 1; ++i) { VCodes[i + 1].text = character; SetLineColor(i + 1, Gray); } } } //设置相应Text的Line的颜色 private void SetLineColor(int which, Color color) { VCodes[which].transform.GetChild(0).GetComponent<Image>().color = color; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 最近想自学PHP ,做了个验证码,但不知道怎么搞的,总出现一个如下图的小红叉,但验证码就是显示不出来,原因如下 未修改之前,出现如下错误; (1)修改步骤如下,原因如下,原因是apache权限没开, (2)点击打开php.int., 搜索extension=ph...2013-10-04
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
jQuery Real Person验证码插件防止表单自动提交
本文介绍的jQuery插件有点特殊,防自动提交表单的验证工具,就是我们经常用到的验证码工具,先给大家看看效果。效果图如下: 使用说明 需要使用jQuery库文件和Real Person库文件 同时需要自定义验证码显示的CSS样式 使用实例...2015-11-08- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能效果图:先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下:复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 验证码类文件 CreateImg.class.php <?php class ValidationCode { private $width,$height,$codenum; public $checkcode; //产生的验证码 private $checkimage; //验证码图片 private $disturbColor = ''; /...2015-11-08
- 这篇文章主要介绍了基于JavaScript实现验证码功能的相关资料...2017-04-03
- 下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 代码...2017-07-06
- 验证码是一个现在WEB2.0中常见的一个功能了,像注册、登录又或者是留言页面,都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码,但那是更高级的验证了,...2016-11-25
- 这篇文章主要介绍了基于Pytorch版yolov5的滑块验证码破解思路详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-25
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24- 工信部的ICP备案网站登录时验证码一直输入不正确怎么回事,为了防止一些机器采集人工信部对于查询验证做得识别度极低,所以许多的朋友都会发现输入验证码一直有问题了,那...2016-10-10
- 这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 最近接到新需求,需要实现一个点击发送验证码之后,按钮禁用,在5秒之后取消禁用,看似需求很简单,实现起来还真的好好动动脑筋,下面小编把jquery控制按钮禁用核心代码分享给大家,需要的朋友参考下吧...2021-07-24
- web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧...2017-06-24
- GoDaddy怎么开启手机验证码登录?最近老听朋友说gd用户盗了,然后域名丢失了,今天 我们一起来看看关于GoDaddy开启手机验证码登录的教程. 给账户添加多重验证是为了账...2016-10-10
- 这篇文章主要介绍了python网络爬虫实现发送短信验证码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-25
- 这篇文章主要介绍了C#验证码识别基础方法实例分析,较为详细的总结了C#验证码的实现思路及具体步骤,并对实现思路进行了总结归纳,具有很好的实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了vue实现登录验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-13
- 这篇文章主要介绍了.net验证码生成及使用方法,先了解验证码是什么以及其作用,最后分享了如何制作验证码,内容很全面,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了SpringBoot如何使用Captcha生成验证码,帮助大家更好的理解和学习使用SpringBoot,感兴趣的朋友可以了解下...2021-04-24