【Unity】Input Fieldの入力形式を制限する

次のようにメールアドレスやパスワードなど決まった形式の文字列を入力させるにはどうすればいいの？

Input FieldのContent Typeを設定すれば良いわ。

編集可能なテキストのUIを提供するInput Fieldでは、入力可能な形式を制限したり修正したりすることができます。

例えば次のような入力形式が存在します。

このような形式はInput Field側でプリセットとして提供されていますが、独自の入力形式や補正処理などを適用することも可能です。

また、このような機能は一部を除き、TextMesh Pro版、レガシー版両方のInput Fieldで使用可能です。 ^[1] 内部的には共通ロジックが実行されているようです。TextMesh Pro版限定で使用可能なTMP_InputValidatorを用いる方法もあります。

本記事では、Input Fieldの入力形式を制限したり、独自の形式を適用したりする方法について解説していきます。

前提条件

予めInput FieldがCanvasに配置されているものとします。

本記事ではTextMesh Pro版のInput Fieldを例にとって解説していきますが、レガシー版のInput Fieldでもほぼ同様の手順で実施可能です。

入力形式の設定

TextMesh Pro – Input Field（レガシー版はInput Field）コンポーネントのContent Type項目を設定します。

設定可能な項目は以下の通りです。

補正の挙動はTextMesh Pro版、レガシー版ともに一緒です。

参考：Input Field | Unity UI | 1.0.0

参考：Enum InputField.ContentType | Unity UI | 1.0.0

設定例

以下は、Content Typeを上から順にName、EmailAddress、Password、IntegerNumberの順に設定した例です。

実行結果

実際に文字列を入力したときの挙動です。

指定通りの挙動になりました。

カスタム定義を適用する

Content TypeにCustomを設定すると、より詳細な入力形式や修正処理を定義することができます。

この時、次のような項目が下に出現します。複数行やキーボードの種類などを設定できます。

設定項目について一通り解説していきます。

Line Type

単一行、複数行などの指定ができます。設定値によって次のような振る舞いをします。

参考：Enum InputField.LineType | Unity UI | 1.0.0

Input Type

パスワード入力、自動修正などの指定ができます。

参考：Enum InputField.InputType | Unity UI | 1.0.0

Keyboard Type

主にタッチスクリーンなどで表示されるキーボードの種類を指定できます。

参考：TouchScreenKeyboardType – Unity スクリプトリファレンス

実際に実機で検証した結果含め、より詳細な解説は以下記事でまとめております。

【Unity】Input Fieldでモバイル向けキーボードを指定する

Unityの標準UIのInput Fieldで文字入力するとき、iOSやAndroidなどのモバイル環境では次のようなキーボードが表示されます。 キーボードにはいくつか種類があり、設定で自由に変更可能です。 例えば数字入…

2022年9月13日

Character Validation

入力の検証方法を指定します。

参考：Enum InputField.CharacterValidation | Unity UI | 1.0.0

スクリプトからの入力文字制御

ここまで解説した方法では、Input Fieldの設定項目から許容する形式や修正処理の挙動を定義していました。

このような制御は独自のスクリプトから行うことも可能です。onValidateInputイベントを使う方法、TMP_InputValidator継承クラスを実装する方法の2通り存在します。

それぞれ使い方の注意点含め、使用例と共に解説していきます。

onValidateInputイベント経由で制御する

Input Field全体の挙動を独自のものに置き換える方法です。

TextMesh Pro版ではTMP_InputField.onValidateInputイベント、レガシー版ではInputField.onValidateInputイベントに制御を行う処理を登録します。

// Input Field
// レガシー版はInputFieldクラスになる
TMP_InputField inputField = GetComponent<TMP_InputField>();

// イベント登録
inputField.onValidateInput += OnValidateInput;

onValidateInputイベントは文字入力を確認するタイミングで発火します。

参考：Class InputField | Unity UI | 1.0.0

onValidateInputイベントは次のような型（デリゲート）として定義されています。

public delegate char OnValidateInput(string text, int charIndex, char addedChar);

引数addedCharに新しく入力された文字が渡ってくるため、現在の文字列が格納されている引数text、カーソル位置が格納されている引数charIndexなどを元に入力文字のチェックや置き換えなどを行います。

参考：Delegate InputField.OnValidateInput | Unity UI | 1.0.0

サンプルスクリプト

アルファベットと数字入力のみ許容し、アルファベットを大文字に置き換えるスクリプトの例です。

using TMPro;
using UnityEngine;

public class UpperLetterValidator : MonoBehaviour
{
    // Input Field（レガシー版はInputFieldクラスに置き換える）
    [SerializeField] private TMP_InputField _inputField;

    private void Awake()
    {
        // イベント登録
        _inputField.onValidateInput += OnValidateInput;
    }

    // 入力された文字のチェックと変換
    private char OnValidateInput(string text, int index, char addedChar)
    {
        // アルファベットまたは数字でなければ入力しない
        if (!char.IsLetterOrDigit(addedChar))
            return '\0';

        // アルファベットの小文字なら大文字に変換する
        return char.ToUpper(addedChar);
    }
}

上記スクリプトをUpperLetterValidator.csという名前で保存し、適当なゲームオブジェクトにアタッチし、インスペクターより対象のInput Fieldを指定すると機能するようになります。

実行結果

アルファベットと数字以外の入力を受け付けず、入力したアルファベットの小文字は大文字に変換されるようになりました。

スクリプトの説明

以下部分でスクリプトによる制御を行っています。

// 入力された文字のチェックと変換
private char OnValidateInput(string text, int index, char addedChar)
{
    // アルファベットまたは数字でなければ入力しない
    if (!char.IsLetterOrDigit(addedChar))
        return '\0';

    // アルファベットの小文字なら大文字に変換する
    return char.ToUpper(addedChar);
}

char.IsLetterOrDigitメソッドは、引数に指定された文字がアルファベットか数字のときにtrueを返すメソッドです。

例ではfalseの時は入力を受け付けないようにしたいため、null文字「’\0’」をreturnしています。

null文字をreturnすると、入力された文字が破棄され、Input Fieldに反映されなくなります。

また、アルファベットを大文字に変換するために、char.ToUpperメソッドを使用しています。

InputValidator経由で制御する（TextMesh Pro限定）

TMP_InputValidator継承クラスを実装して制御する方法です。

TextMesh Pro版限定ですが、より細かな制御が可能です。

参考：Class TMP_InputValidator

TMP_InputValidatorはScriptableObjectであるため、アセットとして作成しておく必要があります。

サンプルスクリプト

先述の例をTMP_InputValidator継承クラスで実装するように変更したスクリプトです。

using TMPro;
using UnityEngine;

[CreateAssetMenu(
    fileName = "UpperLetterValidator",
    menuName = "TextMeshPro/Create Upper Letter Validator",
    order = 0
)]
public class TMP_UpperLetterValidator : TMP_InputValidator
{
    // 入力された文字のチェックと変換
    public override char Validate(ref string text, ref int pos, char ch)
    {
        // アルファベットまたは数字でなければ入力しない
        if (!char.IsLetterOrDigit(ch))
            return '\0';
        
        // アルファベットの小文字なら大文字に変換する
        ch = char.ToUpper(ch);

        // 現在のテキストを更新
        text += ch;

        // 現在のカーソル位置を更新
        pos++;

        return ch;
    }
}

上記スクリプトをTMP_UpperLetterValidator.csという名前で保存しておきます。

適用手順

プロジェクトウィンドウで右クリックし、Create > TextMeshPro > Create Upper Letter Validatorの順に選択し、アセットを作成します。 ^[2] メニュー項目はサンプルスクリプト側で定義したものです。独自のメニューを定義している場合は該当する項目を選択するものとします。

該当するInput FieldコンポーネントのContent Type項目にCustom、その下のCharacter Validation項目にCustom Validatorを指定します。

そして、先ほど作成したアセットをInput Validator項目に指定します。

実行結果

ここまでの手順を成功させると、1つ目の例と同じ挙動になります。

もし別のスクリプトからonValidateInputイベントを拾って制御されている場合、挙動が上書きされてしまうためご注意ください。

スクリプトの説明

以下部分でTMP_InputValidator継承クラスを定義しています。

[CreateAssetMenu(
    fileName = "UpperLetterValidator",
    menuName = "TextMeshPro/Create Upper Letter Validator",
    order = 0
)]
public class TMP_UpperLetterValidator : TMP_InputValidator

また、TMP_InputValidatorクラスはScriptableObject継承クラスなので、ScriptableObjectアセットとして予め作成しておく必要があります。

これをメニューから可能にするために、CreateAssetMenu属性を指定してCreate > TextMeshProメニュー配下にCreate Upper Letter Validatorという項目を追加しています。

入力文字をチェックしたり変換したりするロジックは変わりませんが、現在のテキストとカーソル位置を自分で更新する必要があります。

// 現在のテキストを更新
text += ch;

// 現在のカーソル位置を更新
pos++;

さいごに

Input Fieldに入力可能な文字や形式、修正などの制御を行う方法について解説しました。

カスタム設定にするとより細かな設定が可能になります。スクリプトを活用することでより高度な入力制御も実現可能です。

参考サイト

• Input Field | Unity UI | 1.0.0
• TouchScreenKeyboardType – Unity スクリプトリファレンス
• TMP_InputValidation documentation – Unity Forum