【Unity3D-UGUI系列】（八）InputField 输入框组件详解

推荐阅读

CSDN主页

GitHub开源地址

Unity3D插件分享

简书地址

我的个人博客

QQ群：1040082875

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点：

灵活
快速
可视化

对于开发者来说有很多的优点，比如说：

效率高
实现效果好
易于使用和拓展
与Unity编辑器的兼容性高

二、InputField 输入框组件介绍

InputField 输入框组件是一个用来输入内容的组件。

通常用来输入账号、密码、聊天信息，或者输入参数等情况。

在Unity的Hierarchy视图中选择“Create→UI→Input Field”新建一个输入框组件：
在这里插入图片描述
在Hierarchy视图中，可以看到InputField的层级结构：

InputField子对象有两个Text，Placeholder用来提示用户输入的占位符，Text用来输入内容。

三、InputField 输入框组件属性

接下来详细的看一下InputField 输入框组件的属性：
在这里插入图片描述
Image组件已经介绍过了，可以忽略，主要了解Input Field组件：
Interactable、Transition、Navigation跟Button组件是相似的，Button教程中有详细解释。

属性	功能
TextComponent	用来管理输入的文本组件
Text	输入的内容
Character Limit	字符限制类型，可以限制最大字符数的值。
Content Type	内容类型，定义输入内容接受/限制的字符类型
Line Type	行类型。单行、多行，多行回车换行
Placeholder	占位符，用来提示输入的内容，当点击输入框后会隐藏
Caret Blink Rate	输入框上的光标的闪烁频率
Caret Width	输入框上的光标的宽度
Custom Caret Color	自定义光标颜色
Selection Color	选中文本的背景颜色
Hide Mobile Input	隐藏移动输入内容
Read Only	是否只读
On Value Changed	监听事件

InputField 输入框组件主要就是为了管理输入内容的组件，可以控制输入的文本的长度，类型显示等。

下面就详细介绍一下InputField组件的输入类型。

四、InputField 输入框组件的字符类型

在这里插入图片描述
一共有以下几种类型：

类型	功能
Standard	标准，可以输入任意字符
Auto corrected	自动更正，可以自动更正用户输入，并建议输入内容
Integer Number	整数，只允许输入整数
Decimal Number	小数，允许输入数字和小数点后一位
Alphanumeric	字母数字，允许字母和数字。无法输入符号
Name	名称(支持中文)自动将每个单词的首字母大写。
Email Address	电子邮件地址，允许您输入最多包含一个@符号的字母数字字符串
Password	密码：用 * 表示输入的字符，从而隐藏输入内容。允许输入任意字符
Pin	密码：用 * 号表示输入的字符，从而隐藏输入内容。仅允许输入整数
Custom	自定义：允许自定义行类型、输入类型、默认键盘类型、字符验证

这几个就没啥好说的，在这里插入图片描述

主要讲一下自定义：

在这里插入图片描述
Line Type：行类型，允许输入单行或者多行，或者Enter 键来新建行，继续输入

Input Type：输入类型，有三个选项，任何字符、自动修正、密码类型

Keyboard Type：它可以在用户选中输入框时，调出不同类型的键盘
在这里插入图片描述

名称	功能
Default	目标平台的默认键盘
ASCLL Capable	带标准ASCII键的键盘。
Numbers And Punctuation	键盘与数字和标点符号键
URL	键盘与URL输入键
Number Pad	键盘与标准数字键
Phone Pad	键盘与适合键入电话号码的布局
NamePhone Pad	键盘与字母数字键
Email Address	带有适合键入电子邮件地址的其他键的键盘
Nintendo Network Account	带有网络账号键的键盘
Social	键盘与常用于社交媒体上的符号键，如Twitter
Search	键盘上带有“.” 空格键旁边的键，适合键入搜索词

Character Validatior：字符验证类型，有整数、小数、字母数字、名字、Email等

在这里插入图片描述
按需设置咯

如果上面还不满足你的设置，想要更加严格的限制，那么请往下看。

五、代码限制输入字符

比如说用正则表达式来判断输入的字符串是否符合格式，符合格式就不管，不符合格式就把赋值输入的字符串减一位的字符串，也就相当于删除掉最后一位

关于正则表达式的应用可以看我另一篇文章：文章链接

5-1、限制输入的字符串0-9 a-f A-F

using System.Text.RegularExpressions;
using UnityEngine;
using UnityEngine.UI;

public class Input_Test : MonoBehaviour
{
    
    
    InputField m_InputField;

    private void Awake()
    {
    
    
        m_InputField = GetComponent<InputField>();
        m_InputField.onValueChanged.AddListener(OnInputFieldValueChang);
    }

    private void OnInputFieldValueChang(string inputInfo)
    {
    
    
        Regex reg = new Regex("^[A-Fa-f0-9]+$");
        if (reg.IsMatch(inputInfo))
        {
    
    
            m_InputField.text = inputInfo;
        }
        else
        {
    
    
            if (m_InputField.text == "")
            {
    
    
                m_InputField.text = "";
            }
            else
            {
    
    
                m_InputField.text = inputInfo.Substring(0, inputInfo.Length - 1);
            }
        }    
    }
}

在这里插入图片描述