UG3L5——InputField 文本输入

InputField

InputField是输入字段组件
是UGUI中用于处理玩家文本输入相关交互的关键组件

默认创建的InputField由3个对象组成
父对象——InputField组件依附对象 以及 同时在其上挂载了一个Image作为背景图
子对象——文本显示组件（必备）、默认显示文本组件（必备）

本章代码关键字

1
2
3
4
Inputfield                                 //文本输入控件类
inputfield.onValueChanged.AddListener()    //传入当文字改变时执行的函数
inputfield.onSubmit.AddListener()          //传入当确认输入时执行的函数
inputfield.onEndEdit.AddListener()         //传入当退出输入时执行的函数

InputField 参数相关

​image​

  • Interactable：是否接受输入

  • Transition：响应用户输入的过渡效果

  • Navigation：导航模式，可以设置UI元素如何在播放模式中控制器导航

  • TextComponent：用于关联显示输入内容的文本组件

  • Text：输入框的起始默认值

  • Character Limit：可以输入字符长度的最大值

  • Content Type：输入的字符类型限制

    • Standard：标准模式；可以输入任何字符
    • Autocorrected：自动更正模式；
      跟踪未知单词，向用户建议合适的替换候选词
    • Integer Number：整数模式；用户只能输入整数
    • Decimal Number：十进制数模式；用于只能输入数字包括小数
    • Alphanumeric：字母数字模式；只能输入字母和数字
    • Name：名字模式；自动将每个单子首字母大写
    • Email Address：邮箱地址模式；
      允许最多输入一个@符号组成的字符和数字字符串
    • Password：密码模式；用星号隐藏输入的字符，允许使用符号
    • Pin：别针模式；用星号隐藏输入的字符，只允许输入整数
    • Custom：自定义模式；
      允许自定义行类型，输入类型，键盘类型和字符验证

  • Line Type：行类型，定义文本格式

    • Single Line：只允许单行显示
    • Multi Line Submit：允许使用多行。仅在需要时使用新的一行
    • Multi Line NewLine：允许使用多行。用户可以按回车键空行

  • Placeholder：关联用于显示初始内容文本控件

  • Caret Blink Rate：光标闪烁速率

  • Caret Width：光标宽

  • Custom Caret Color：自定义光标颜色

  • Selection Color：批量选中的背景颜色

  • Hide Mobile Input：隐藏移动设备屏幕上键盘，仅适用于IOS

  • Read Only：只读，不能改

  • Character Limit：可以输入字符长度的最大值

  • OnValueChanged：内容改变时执行的函数列表

  • OnSubmit：按下回车等确认输入时才会执行的函数列表

    该函数列表在Unity2021及以后的版本里存在
    在按下回车是换行的输入框内， 该函数列表按回车键是无法执行的

  • OnEndEdit：只要结束输入就会执行的函数列表

关于三个函数的执行时机

OnValueChanged：只要输入框的文字内容变化，就会执行

OnSubmit 和 OnEndEdit 的区别：
OnSubmit只有执行的确认输入的操作，例如按下回车时才会执行，这时OnEndEdit也会执行
但是如果不按回车直接离开输入框，则OnSubmit不会执行，OnEndEdit依然会执行
因此，OnSubmit可以用在那种只有按下回车才能记录输入的信息，直接结束输入不记录信息的情况，
或者需要按下回车才进行额外操作的情况（例如搜索引擎回车自动搜索）

代码控制 InputField

面板上的参数都可以用代码控制

1
2
3
InputField input = this.GetComponent<InputField>();
print(input.text);
input.text = "123123123123";

监听事件的两种方式

函数要求需要参数类型为string类型的参数，表示当前输入框内的文字内容

  1. 拖脚本

    操作类似于Toggle，但要注意三个函数列表的执行时机不同，同时也不要选择静态参数的函数，以免无法检测到输入变化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    using UnityEngine;
    using UnityEngine.UI;

    public class Lesson12 : MonoBehaviour
    {
        public void ChangeInput(string str)
        {
            print("改变的输入内容" + str);
        }

        public void SubmitInput(string str)
        {
            print("确认输入内容" + str);
        }

        public void EndInput(string str)
        {
            print("结束输入时内容" + str);
        }
    }

    ​image​

  2. 代码添加

    类似于Toggle，只是有三种函数，需要注意它们的执行时机

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    inputfield.onValueChanged.AddListener((str) =>
    {
        print("改变" + str);
    });
    inputfield.onSubmit.AddListener((str) =>
    {
        print("确认输入" + str);
    });
    inputfield.onEndEdit.AddListener((str) =>
    {
        print("结束输入" + str);
    });