InputField TextMeshPro

NOTE

这是 TextMeshPro - Input Field，用于让玩家输入文字、数字、密码等内容。

一、工作原理

点击输入框
    ↓
TMP_InputField 获得焦点
    ↓
用户输入文字
    ↓
TextMeshProUGUI 显示文字
    ↓
光标跟随输入位置
    ↓
触发 On Value Changed(String)

典型层级：

Input Field
├── Text Area
│   ├── Text（TextMeshProUGUI）
│   └── Placeholder（TextMeshProUGUI）
└── Scrollbar（可选）

二、截图中的字段

Selectable 区域

• Interactable：是否允许输入。
• Transition：输入框被悬停、选中、按下时的视觉变化。
• Target Graphic：当前为 InputField (TMP) (Image)，负责背景颜色变化。
• Normal Color：正常状态。
• Highlighted Color：鼠标悬停。
• Pressed Color：按下。
• Selected Color：获得焦点。
• Disabled Color：不可交互。
• Color Multiplier：颜色乘数，当前为 1。
• Fade Duration：颜色过渡时间，当前为 0.1 秒。
• Navigation：键盘或手柄导航方式。
• Visualize：显示导航关系。

文本引用

• Text Viewport：当前为 Text Area，用于裁剪和滚动输入文字。
• Text Component：当前为 Text (Text Mesh Pro UGUI)，负责显示输入内容。
• Text：输入框的初始文本，截图中为空。

注意：

TMP_InputField 负责编辑逻辑
TextMeshProUGUI 负责显示文字

Input Field Settings

• Font Asset：TMP 字体资源。
• Point Size：字体大小，当前为 14。
• Character Limit：字符数量限制，当前为 0，通常表示不限制。
• Content Type：输入内容类型，当前为 Standard。
• Line Type：当前为 Single Line，只能输入单行。
• Placeholder：当前为空时显示的提示文字。
• Vertical Scrollbar：多行输入时使用的垂直滚动条。
• Caret Blink Rate：光标闪烁频率，当前为 0.85。
• Caret Width：光标宽度，当前为 1。
• Custom Caret Color：是否使用自定义光标颜色。
• Selection Color：选中文字后的背景颜色。

三、Content Type 常用模式

• Standard：普通文本。
• Integer Number：整数。
• Decimal Number：小数。
• Alphanumeric：字母和数字。
• Name：姓名格式。
• Email Address：邮箱格式。
• Password：密码输入。
• Pin：数字密码。
• Custom：自定义输入规则。

例如制作密码框：

Content Type → Password

制作数字输入框：

Content Type → Integer Number

四、Control Settings

• On Focus - Select All：获得焦点时自动全选文字。
• Reset On Deactivation：控件停用时重置编辑状态。
• Keep Text Selection Visible：失去焦点后仍显示选区。
• Restore On ESC Key：按 Esc 恢复编辑前内容。
• Should Activate On Select：被选中时自动激活输入框。
• Hide Soft Keyboard：移动端隐藏软键盘。
• Hide Mobile Input：隐藏移动端原生输入框。
• Read Only：只读模式，只显示文字，不能编辑。

五、输入事件

在 Inspector 下方通常还能看到：

On Value Changed (String)

文字每次变化时触发，参数是当前字符串。

End Edit (String)

用户提交或输入框失去焦点时触发。

代码示例：

using TMPro;
using UnityEngine;

public class InputDemo : MonoBehaviour
{
    [SerializeField] private TMP_InputField input;

    public void OnValueChanged(string value)
    {
        Debug.Log("当前输入：" + value);
    }

    public void Submit()
    {
        Debug.Log("提交内容：" + input.text);
    }

    public void Clear()
    {
        input.SetTextWithoutNotify("");
    }
}

读取内容时使用：

input.text

不要只读取子物体 TextMeshProUGUI 的文字，因为密码框可能显示的是星号，文本也可能被裁剪。

六、常见问题

• 无法输入：检查 Interactable、EventSystem 和 Graphic Raycaster。
• 占位符不显示：检查 Placeholder 引用以及输入框是否为空。
• 密码没有隐藏：将 Content Type 设置为 Password。
• 文字超出输入框：检查 Text Area、自动换行和字体大小。
• 多行输入不能滚动：设置 Line Type 为多行，并绑定 Vertical Scrollbar。
• 代码读取不到内容：读取 TMP_InputField.text，不要读取背景 Image。