Shulou(Shulou.com)06/02 Report--

This article mainly introduces UGUI how to achieve 4-digit CAPTCHA input, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

Originally, it is not a difficult problem to develop a CAPTCHA function on the computer. 4 InputField is done. Listen to the onValueChanged of InputField in turn, jump to the next InputField when value.length = = 1, and ActiveField.

But on the phone, when you jump to the next InputField, the keyboard will contract and then eject. However, if the interval between the keyboard on the phone is too short, it will no longer pop up. Even if the interval of 0.2 seconds is set, the repeated expansion of the mobile keyboard will lead to a sense of discontinuity in the user's input of CAPTCHA, which greatly reduces the experience.

So is there any way to achieve this function? Of course there is!

Although NGUI can be done by setting word spacing, UGUI's InputField does not have such an attribute. Therefore, it has to be achieved through some cool techs.

In addition, other bosses have implemented the word spacing setting of UGUI's InputField with code, but this article is mainly about the cool techs method.

Let's take a look at this prefabricated structure:

Four VCode (UnityEngine.UI.Text) components are added under this InputField, and a child object of Line (Image) is added below the corresponding to underline. (whenever one-bit CAPTCHA input is completed, jump to the next Text component to display the new CAPTCHA, and the underscore of the entered CAPTCHA turns blue)

Whether there is an idea, yes, is to use four Text components to display CAPTCHA, while InputField is used to receive user input (does not display the input results).

In this case, there will be no problems such as the keyboard no longer pops up due to the repeated expansion or too small interval caused by jumping to InputField.

Whenever the number of bits of the verification code entered by the user changes, the corresponding number of digits is assigned to the corresponding Text, so that only one InputField is used to enter the 4-bit verification code, regardless of the length of the spacing between the verification codes.

Now that the logic is in place, the code is not difficult.

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 [version _ CODE_LENGTH]; / / choose blue and gray to indicate input (Blue) and non-input (Gray) public Color Blue; public Color Gray; private int m_lastVcodeLength = 0, respectively Void Start () {/ / externally set components such as VCodeInput, or use code to get, which must be set before initialization or before / / UIUtility is a tool for UI component acquisition and binding VCodeInput = UIUtility.GetChildControl ("VCodeInput", transform); BindUIEvents () } private void BindUIEvents () {/ / the value of binding VCodeInput can be changed, both external binding and code binding are allowed. Here we use a UI tool UIUtility.BindUIEvent (EventTypeEnum.InputFieldOnValueChanged, OnVCodeValueChanged, VCodeInput.transform) implemented by ourselves. } / / listen for character changes in input private void OnVCodeValueChanged (string value) {/ / the length limit for VCodeInput has been set externally, with a maximum of 4, but to avoid unexpected situations, limit the character length if (value.Length)

4) {return;} / / determines whether the character is long or shorter, which is used to determine the jump direction of Text bool next = false; / / split characters. The default is empty. If the length increases, a new verification code is entered, and the verification code is recorded as string character = string.Empty. / / the default length is 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) } / / move the cursor (actually the Text used to display the CAPTCHA) private void OnMoveCursor (bool next, int which, string character) {/ / assign the value to the corresponding Text if (next) {VCodes [which] .text = character; SetLineColor (which, Blue) } else {/ * it is relatively encircling here. If it is a fallback, it means that the current which is actually the number of digits that have been backspace. * for example, if 123was originally entered, it becomes 12 after backspace. * then the value of which is value.length-1 = 1. Value.length is 2 * and we need to set the Text of the third bit (counting from 0 to 2) to empty * so we need I + 1, and to avoid users selecting all CAPTCHAs and deleting all CAPTCHAs, we need to traverse * / for (int I = which; I < VERIFY_CODE_LENGTH-1; + + I) {VCodes [I + 1] .text = character SetLineColor (I + 1, Gray);} / / set the color of the Line of the corresponding Text private void SetLineColor (int which, Color color) {VCodes [which] .transform.GetChild (0). GetComponent (). Color = color }} Thank you for reading this article carefully. I hope the article "how to input 4-digit CAPTCHA in UGUI" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.