原本在電腦上開發一個驗證碼功能不是什麼難題，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;
  }
  
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。