這篇文章主要介紹了UGUI如何實現(xiàn)4位驗證碼輸入，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供宕昌企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為宕昌眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

原本在電腦上開發(fā)一個驗證碼功能不是什么難題，4個InputField就搞定了，依次監(jiān)聽InputField的onValueChanged，當(dāng)value.length == 1時跳轉(zhuǎn)至下一個InputField，并ActiveField即可。

但是到了手機上，跳轉(zhuǎn)至下一個InputField時，手機鍵盤會收縮，然后再彈出，然而，手機上的鍵盤如果間隔過短，會出現(xiàn)收回后不再彈出的情況。即使設(shè)置了0.2秒的間隔，也會因為手機鍵盤反復(fù)伸縮導(dǎo)致用戶輸入驗證碼出現(xiàn)間斷感，極大降低了體驗。

那么有沒有辦法實現(xiàn)這個功能呢？當(dāng)然有啦！

雖然說NGUI完全可以通過設(shè)置字間距來完成，但是UGUI的InputField并沒有這樣的屬性。因此，得通過一些黑科技來實現(xiàn)。

此外，其他大佬用代碼實現(xiàn)了UGUI的InputField的字間距設(shè)置，但是本篇主要是講述黑科技方法。

先看下這個預(yù)制體結(jié)構(gòu)：

在這個InputField下添加了4個VCode(UnityEngine.UI.Text)組件，并在對應(yīng)的下方添加了一個Line(Image)的子物體，用來做下劃線。（每當(dāng)一位驗證碼輸入完成后，跳轉(zhuǎn)至下一個Text組件顯示新的驗證碼，切已輸入的驗證碼的下劃線變成藍(lán)色）

是不是有思路了，沒錯，就是用4個Text組件來顯示驗證碼，而InputField這是用來接收用戶輸入而已（不顯示輸入結(jié)果）。

這樣的情況下，不會因為跳轉(zhuǎn)InputField導(dǎo)致手機鍵盤反復(fù)伸縮或間隔過小而導(dǎo)致手機鍵盤不再彈出等問題。

每當(dāng)用戶輸入的驗證碼位數(shù)發(fā)生變化，則將對應(yīng)的位數(shù)賦給對應(yīng)的Text，這樣就做到了只使用1個InputField來輸入4位驗證碼，而無需關(guān)心驗證碼之間的間距長度了。

既然邏輯構(gòu)思好了，代碼就不難了。

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];   //外部選擇藍(lán)色與灰色，分別表示已輸入(Blue)和未輸入(Gray)  public Color Blue;  public Color Gray;   private int m_lastVcodeLength = 0;   void Start()  {    //外部設(shè)置VCodeInput等組件，或使用代碼獲取，這必須在初始化或之前設(shè)置完成    //UIUtility是自己實現(xiàn)的一個針對UI組件獲取與綁定的一個工具    VCodeInput = UIUtility.GetChildControl("VCodeInput", transform);    BindUIEvents();  }   private void BindUIEvents()  {    //綁定VCodeInput的值變化，外部綁定和代碼綁定皆可，這里使用的是自己實現(xiàn)的一個UI工具    UIUtility.BindUIEvent(EventTypeEnum.InputFieldOnValueChanged,          OnVCodeValueChanged, VCodeInput.transform);  }   // 監(jiān)聽輸入的字符變化  private void OnVCodeValueChanged(string value)  {    //外部已經(jīng)設(shè)置好VCodeInput的長度限制，最多為4，但是為了避免意外情況，限制字符長度    if (value.Length < 0 || value.Length > 4)    {      return;    }    //判斷字符是邊長了還是變短了，用以決定Text的跳轉(zhuǎn)方向    bool next = false;    //分割字符，默認(rèn)為空，如果是長度增加，則說明輸入了新的驗證碼，將這個驗證碼記錄下來    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);  }   //移動光標(biāo)（實際上是操作用來顯示驗證碼的Text）  private void OnMoveCursor(bool next, int which, string character)  {    //將值賦給對應(yīng)的Text    if (next)    {      VCodes[which].text = character;      SetLineColor(which, Blue);    }    else    {      /*這里比較繞，如果是回退，則說明當(dāng)前的which其實是已經(jīng)退格后的位數(shù)，      * 比如說，原本是輸入了123，退格后則變成了12，      * 那么which的值為value.length - 1 = 1; value.length為2      * 而我們需要將原本第三位（從0開始計數(shù)，值為2）的Text設(shè)置為空      * 因此需要i + 1，而為了避免用戶全選并刪除所有驗證碼的情況，需要遍歷      */      for (int i = which; i < VERIFY_CODE_LENGTH - 1; ++i)      {        VCodes[i + 1].text = character;        SetLineColor(i + 1, Gray);      }    }  }   //設(shè)置相應(yīng)Text的Line的顏色  private void SetLineColor(int which, Color color)  {    VCodes[which].transform.GetChild(0).GetComponent().color = color;  }  }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“UGUI如何實現(xiàn)4位驗證碼輸入”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!