Unity入門

【Unity】TMP_InputFieldの入力・状態をスクリプトで取得する方法(onEndEdit / onValueChanged )

この記事について

この記事ではInputFieldのEventを使用することで、InputFieldの入力・状態をスクリプトで制御する方法について説明します。

この記事でわかること

  • inputField.text で入力された文字列を取得できる
  • onEndEdit や onValueChanged を使えば、入力が完了した時や変更された瞬間にイベントを受け取れる

InputFieldとは?

InputFieldについては以下の記事を参考にしてください。

InputFieldをスクリプトで制御

InputFieldをスクリプトから参照する準備

ヒエラルキーで右クリックをしてInputFieldを用意します。
・「右クリック」→「UI」→「Input Field – TextMeshPro」

次にスクリプトを作成してInputFieldにアタッチしてください。

テキストとプレースホルダーの入力内容を取得する

InputFieldには初期状態だと何も入力されていません。なので、InputField(TMP)のテキストに適当な文字を入力してから以下のスクリプトを実行してみましょう。

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class InputField_Event : MonoBehaviour
{
    [SerializeField] private TMP_InputField testInputField;
    [SerializeField] private TMP_Text testPlaceholder;

    void Start()
    {
        // GameObjectにアタッチされているTMP_InputFieldを取得
        testInputField = GetComponent<TMP_InputField>();
        // TMP_InputFieldの子オブジェクトのPlaceholderを取得
        testPlaceholder = testInputField.placeholder as TMP_Text;

        Debug.Log(testInputField.text);
        Debug.Log(testPlaceholder.text);
    }
}

実行してみると2つのテキストを取得できてますね。(プレースホルダーの方はあまり他のサイトでも見たことがなかったので載せてみました。)

入力完了時にイベントを受け取る方法(onEndEdit)

ユーザーがEnterキーを押した時やフォーカスが外れた時に発火します。

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class InputField_Event : MonoBehaviour
{
    [SerializeField] private TMP_InputField testInputField;

    void Start()
    {
        // GameObjectにアタッチされているTMP_InputFieldを取得
        testInputField = GetComponent<TMP_InputField>();
    // イベント登録
        testInputField.onEndEdit.AddListener(OnInputEnd);
    }
    //入力完了時にイベントを受け取る
    private void OnInputEnd(string text)
    {
        Debug.Log("入力完了: " + text);
    }
}

実行してみるとEnterの時もフォーカスを外した時も問題なくイベントが動きました。
動画ではわかりにくいですが、1度目がEnterで2度目が左クリックしてます。

入力中の変更を監視する方法(onValueChanged)

入力のたびに呼ばれるのでリアルタイム検索窓などに活用可能です。
しかし、処理が重たくなるため個人的には使用はおすすめできないです。

void Start()
{
    inputField.onValueChanged.AddListener(OnInputChange);
}

private void OnInputChange(string text)
{
    Debug.Log("入力中: " + text);
}

実行してみると変更毎にDebugが走っていますね。最後に切り取ってから貼り付けましたが1文字ずつ判定されるみたいです。

まとめ

  • inputField.text で入力値を取得可能
  • onEndEdit → 入力完了時に処理を走らせる
  • onValueChanged → 入力中にリアルタイムで処理を走らせる