【Unity UGUI 交互组件——InputFild（TMP版本）（11)】

InputField（输入框）在实际开发中很常用，比如 登录/注册、 游戏内聊天系统、表单与配置等等。

一. 组成

如图所示，Unity InputField 组件结构解析

Unity InputField 组件结构解析

在 Unity 的 UGUI 系统中，InputField 是一个复合型交互组件，它由四个核心部分组成，共同协作实现文本输入功能。理解这些部分的职责对于有效使用和自定义 InputField 至关重要。

组件构成图

📋 组件功能详解

组件部分	功能描述	核心职责	必需性
InputField (根对象)	控制中心	处理输入事件、内容验证、光标控制	✅ 必需
Text Area	可视区域	定义文本显示范围，提供裁剪功能	✅ 必需
Placeholder	占位提示	显示输入提示文本（如"请输入…"）	⚠️ 可选但推荐
Text	内容显示	渲染用户实际输入的文字	✅ 必需

---

🔧 各组件详细说明

1. InputField (根对象/控制器)

位置：根节点上的 InputField 或 TMP_InputField 组件

功能：

• 接收和管理键盘/触摸输入
• 处理文本验证（如限制字符类型）
• 控制光标闪烁和文本选择
• 管理组件状态（启用/禁用）

📋 InputField 组件的 Inspector 参数全览

1. 基础参数部分

参数	类型	默认值	功能描述	使用建议
Interactable	bool	true	是否启用交互	设置为 false 时，输入框将变为灰色且不可操作
Transition	下拉菜单	ColorTint	状态过渡方式	包含 None、ColorTint、SpriteSwap、Animation 四种方式
Navigation	下拉菜单	Automatic	UI 导航方式	决定键盘/手柄在 UI 元素间的切换方式

2. 文本输入参数

参数	类型	默认值	功能描述	使用技巧
Text	string	“”	输入框的初始文本	可预先设置默认值，但运行时修改会触发事件
Character Limit	int	0	最大字符限制	0 表示无限，设置后超过字符将无法输入
Content Type	枚举	Standard	内容类型限制	内置 9 种验证类型： Standard, Integer, Decimal, AlphaNumeric, Name, Email, Password, Pin, Custom 具体下表
Line Type	枚举	SingleLine	行类型限制	SingleLine(单行), MultiLineSubmit(多行回车提交), MultiLineNewline(多行换行)
Input Type	枚举	Standard	输入类型	Standard(标准), AutoCorrect(自动修正), Password(密码)
Keyboard Type	枚举	Default	键盘类型	移动端专用：ASCIICapable, NumberPad, Email, 等

Content Type

验证类型	允许字符	键盘类型	典型应用	移动端优化
Standard	所有字符	默认键盘	聊天、评论	❌
Integer Number	0-9, +, -	数字键盘	年龄、数量	✅
Decimal Number	0-9, ., +, -	数字键盘(带小数点)	价格、分数	✅
Alphanumeric	A-Z, a-z, 0-9	字母数字键盘	用户名、密码	✅
Name	字母, 空格, ’ - .	字母键盘	姓名、昵称	✅
Email Address	字母数字 + @._-	邮箱优化键盘	邮箱地址	✅
Password	所有字符(显示为*)	自适应键盘	密码输入	✅
Pin	0-9(显示为●)	数字键盘	PIN码、验证码	✅
Custom	自定义规则（具体下表）	默认键盘	特殊需求	⚠️ 需手动设置

Custom

📋 参数表

参数	功能描述	枚举值	适用平台	默认值
Line Type	控制文本换行行为	SingleLine, MultiLineSubmit, MultiLineNewline	全平台	SingleLine
Input Type	控制输入方式和自动校正	Standard, AutoCorrect, Password	全平台	Standard
Keyboard Type	指定移动设备键盘类型	Default, ASCIICapable, NumbersAndPunctuation, URL, NumberPad, PhonePad, NamePhonePad, EmailAddress, NintendoNetworkAccount, Social, Search, DecimalPad	移动端	Default
Character Validation	字符级输入验证	None, Integer, Decimal, Alphanumeric, Name, EmailAddress	全平台	None

---

📊 详细参数表

1. Line Type（行类型控制）

枚举值	功能描述	行为特点	适用场景
SingleLine	单行输入模式	- 禁止换行符输入 - 回车键提交内容 - 文本水平滚动	用户名、搜索框、密码
MultiLineSubmit	多行输入但回车提交	- 允许换行符 - 回车键提交整个表单 - Ctrl+Enter 换行	聊天输入、评论框
MultiLineNewline	多行输入且回车换行	- 回车键插入换行符 - 需要特殊按键提交 - 完全自由的多行输入	长文本描述、文档编辑

代码示例：

// 设置多行提交模式
inputField.lineType = InputField.LineType.MultiLineSubmit;

2. Input Type（输入类型控制）

枚举值	功能描述	平台特性	安全考虑
Standard	标准输入模式	- 启用自动更正 - 启用输入预测 - 记录输入历史	可能泄露敏感信息
AutoCorrect	自动校正模式	- 增强的自动更正 - 更强的拼写检查 - 上下文感知建议	不适合专有名词
Password	密码输入模式	- 显示为星号或圆点 - 禁用自动更正 - 不记录输入历史	安全输入，防窥视

移动端特性：

• iOS：自动使用安全文本输入（secureTextEntry）
• Android：自动禁用个性化学习

3. Keyboard Type（键盘类型控制）

枚举值	键盘布局	特殊键	适用场景
Default	系统默认键盘	标准布局	通用文本输入
ASCIICapable	ASCII 兼容键盘	标准符号键	编程相关输入
NumbersAndPunctuation	数字和标点键盘	数字+常用符号	数值和公式输入
URL	URL 优化键盘	.com, /, 😕/	网址输入
NumberPad	纯数字键盘	0-9, 小数点	电话号码、PIN码
PhonePad	电话键盘	*、#、+	电话号码输入
NamePhonePad	姓名和电话混合	字母+数字布局	联系人信息
EmailAddress	邮箱地址键盘	@, .com, .org	电子邮件输入
NintendoNetworkAccount	任天堂账户键盘	游戏相关符号	游戏账号输入
Social	社交媒体键盘	@, #, 表情符号	社交媒体输入
Search	搜索优化键盘	搜索图标, Go	搜索框
DecimalPad	小数数字键盘	数字+小数点	价格、测量值

平台支持差异：

• iOS：支持所有键盘类型
• Android：部分键盘类型可能映射为系统最接近类型

4. Character Validation（字符验证）

枚举值	验证规则	允许字符	排除字符
None	无字符验证	所有Unicode字符	无过滤
Integer	整数验证	0-9, +, -	所有非数字字符
Decimal	小数验证	0-9, ., +, -	所有非数字和小数点
Alphanumeric	字母数字验证	A-Z, a-z, 0-9	符号、空格、特殊字符
Name	姓名格式验证	字母, 空格, ', -, .	数字、符号
EmailAddress	邮箱格式验证	字母, 数字, @, ., _, -, +	空格、特殊符号

验证时机：

• 实时验证：输入时立即过滤非法字符
• 失去焦点验证：部分平台在提交时进行额外验证

---

🛠️ 组合配置示例

1. 电子邮箱输入框

Line Type: SingleLine
Input Type: Standard
Keyboard Type: EmailAddress
Character Validation: EmailAddress

效果：移动端自动弹出@符号优先的键盘，实时过滤非法邮箱字符

2. 电话号码输入框

Line Type: SingleLine
Input Type: Standard
Keyboard Type: PhonePad
Character Validation: None

效果：弹出电话拨号键盘，但允许输入任何字符（因为有些电话号码包含分机号）

3. 多行地址输入

Line Type: MultiLineNewline
Input Type: AutoCorrect
Keyboard Type: Default
Character Validation: Name

效果：支持多行地址输入，启用自动校正，只允许字母和有限符号

4. 价格输入框

Line Type: SingleLine
Input Type: Standard
Keyboard Type: DecimalPad
Character Validation: Decimal

效果：弹出带小数点的数字键盘，确保只能输入有效数字格式

🔧 使用技巧

组合验证示例

// 创建自定义验证逻辑
public class CustomInputValidator : MonoBehaviour
{public InputField targetField;void Start(){targetField.characterValidation = InputField.CharacterValidation.None;targetField.onValueChanged.AddListener(CustomValidate);}void CustomValidate(string input){// 只允许字母和空格，最大长度20string filtered = new string(input.Where(c => char.IsLetter(c) || c == ' ').ToArray());if (filtered.Length > 20)filtered = filtered.Substring(0, 20);if (filtered != input)targetField.text = filtered;}
}

响应键盘类型变化

// 动态调整键盘类型基于平台
void SetupPlatformSpecificKeyboard()
{#if UNITY_IOSinputField.keyboardType = TouchScreenKeyboardType.ASCIICapable;#elif UNITY_ANDROIDinputField.keyboardType = TouchScreenKeyboardType.Default;#elseinputField.keyboardType = TouchScreenKeyboardType.NumberPad;#endif
}

通过深入理解这些参数及其组合，您可以创建高度定制化的输入体验，满足各种应用场景的需求。

3. 视觉样式参数

参数	类型	默认值	功能描述	效果说明
Caret Blink Rate	float	0.85	光标闪烁速度	单位：秒，0 表示不闪烁
Caret Width	int	1	光标宽度	取值范围：1-15（像素）
Custom Caret Color	bool	false	是否自定义光标颜色	勾选后出现 Caret Color 选项
Caret Color	Color	#000000	光标颜色	仅当 Custom Caret Color 开启时有效
Selection Color	Color	#A8A8FF80	文本选中颜色	RGBA(168,168,255,0.5)
Hide Mobile Input	bool	false	是否隐藏移动端输入框	移动端专用，影响系统原生输入框显示

4. 子对象绑定

参数	类型	绑定对象	关键作用
Text Component	引用	Text	绑定实际显示用户输入的文本对象
Placeholder	引用	Placeholder	绑定占位提示文本对象
Read Only	bool	-	是否只读

5. 高级文本处理

参数	类型	默认值	功能描述	注意事项
Rich Text	bool	false	是否支持富文本	启用后可使用 ,,等标签
Rich Text Editing	bool	false	是否在编辑时显示富文本	开启后编辑时仍可看到富文本效果
OnFocus Select All	bool	false	获得焦点时全选文本	打开即生效
Reset On Deactivation	bool	true	失去焦点时是否重置文本	禁用时保留输入内容

6. 事件系统

事件	参数类型	触发时机	典型用法
On Value Changed (String)	string	文本变化时触发	实时搜索/过滤
On End Edit (String)	string	按下回车或失去焦点	表单提交
On Value Changed (InputField)	InputField	文本变化时触发	获取完整组件
On Select (BaseEventData)	BaseEventData	选中输入框时	显示自定义键盘
On Deselect (BaseEventData)	BaseEventData	失去焦点时	隐藏键盘

⚙️ TextMeshPro 特有参数（TMP_InputField）

当使用 TextMeshPro InputField 时，还会增加以下文本参数：

参数	类型	默认值	功能描述	优势
Point Size	float	-	字体大小	覆盖全局设置
Font Asset	TMP_FontAsset	-	字体资源	支持 SDF 字体
On Focus Select All	bool	false	获得焦点时全选	同标准 InputField
Global Point Size	float	-	全局字体大小	所有选项统一
Custom Caret Color	bool	false	是否自定义光标	-
Caret Color	Color	#000000	光标颜色	-
Selection Color	Color	#A8A8FF80	选择颜色	-
Restore Original Text On ESC Key	bool	true	按 ESC 恢复原始文本	非常有用的功能
Rich Text	bool	false	富文本支持	完整标签支持
Multi Line	bool	false	多行支持	取代 Line Type
Reset On Deactivation	bool	true	失去焦点重置	-
Text Component	TMP_Text	-	TMP 文本组件	必需

💡 最佳实践配置建议

1. 登录表单配置

- Character Limit: 20
- Content Type: Alphanumeric
- Line Type: SingleLine
- Placeholder: "用户名"
- On End Edit: 提交表单

2. 密码输入框配置

- Character Limit: 32
- Content Type: Password
- Custom Caret Color: true
- Caret Color: #FFFFFF
- Hide Mobile Input: true (移动端)

3. 聊天输入框配置

- Line Type: MultiLineNewline
- Character Limit: 200
- Caret Blink Rate: 0.5
- Rich Text: true
- On Value Changed: 更新预览

4. 数字输入框配置

- Content Type: Integer Number
- Keyboard Type: NumberPad (移动端)
- Character Limit: 6
- Selection Color: #00FF007F

⚠️ 常见配置错误排查

问题现象	可能原因	解决方案
无法输入	Interactable=false	启用交互
输入字符被截断	Character Limit 设置过小	增大限制
密码不显示*	Content Type 未设 Password	设为密码类型
多行不起作用	Line Type 仍为 SingleLine	改为 MultiLineNewline
富文本显示无效	Rich Text 未勾选	勾选 Rich Text
光标不可见	Caret Blink Rate=0	调大闪烁速率

🎯 完整示例：创建带验证的邮箱输入框

using UnityEngine;
using UnityEngine.UI;
using TMPro;public class EmailInputField : MonoBehaviour
{public TMP_InputField emailInput;void Start(){emailInput.contentType = TMP_InputField.ContentType.EmailAddress;emailInput.characterLimit = 100;emailInput.onEndEdit.AddListener(ValidateEmail);emailInput.placeholder.GetComponent<TMP_Text>().text = "输入邮箱地址...";}private void ValidateEmail(string email){bool isValid = System.Text.RegularExpressions.Regex.IsMatch(email, @"^[^@\s]+@[^@\s]+\.[^@\s]+$");if(!isValid){emailInput.text = "";emailInput.Select();}}
}

2. Text Area (可视区域)

位置：通常名为 Text Area 的子对象，带有 Rect Mask 2D 组件

核心功能：

• 定义文本的显示边界
• 裁剪超出范围的文本内容
• 提供滚动视图支持

配置要点：

// 获取Text Area的RectTransform
RectTransform textArea = mainInputField.transform.Find("Text Area").GetComponent<RectTransform>();
textArea.offsetMin = new Vector2(5, 5); // 设置内边距
textArea.offsetMax = new Vector2(-5, -5);

3. Placeholder (占位文本)

位置：通常名为 Placeholder 的子对象，带有 Text 或 TMP_Text 组件

核心功能：

• 在输入框为空时显示提示文本
• 用户开始输入时自动隐藏
• 提供视觉引导，改善用户体验

常见配置：

// 修改占位文本
Text placeholderText = mainInputField.placeholder.GetComponent<Text>();
placeholderText.text = "请输入用户名...";
placeholderText.color = new Color(0.5f, 0.5f, 0.5f, 0.5f); // 半透明灰色

4. Text (文本显示)

位置：通常名为 Text 的子对象，带有 Text 或 TMP_Text 组件

核心功能：

• 显示用户实际输入的内容
• 支持富文本格式（如果使用TMP）
• 响应字体、大小、颜色等样式变化

代码访问示例：

// 获取和修改输入文本
string userInput = mainInputField.text;
mainInputField.text = "默认值";// 监听文本变化
mainInputField.onValueChanged.AddListener(OnInputValueChanged);void OnInputValueChanged(string newValue)
{Debug.Log("输入内容: " + newValue);
}

---

⚙️ 创建与配置流程

标准创建步骤

1. 右键 Hierarchy → UI → Input Field 或 Input Field - TextMeshPro
2. Unity 自动生成完整结构：

   InputField
   ├── Text Area (带RectMask2D)
   │   └── Text (或TextMeshPro文本)
   └── Placeholder (可选)
   

重要配置建议

1. 文本组件选择：

   • 普通 InputField：使用标准 Text 组件
   • TMP_InputField：使用 TextMeshPro - Text，支持更佳渲染效果

2. 布局适配：

   // 确保Text Area正确设置锚点
   RectTransform textArea = mainInputField.textComponent.GetComponent<RectTransform>();
   textArea.anchorMin = Vector2.zero;
   textArea.anchorMax = Vector2.one;
   textArea.offsetMin = new Vector2(5, 5);
   textArea.offsetMax = new Vector2(-5, -5);
   

3. 移动端优化：

   // 调整移动端输入体验
   mainInputField.shouldHideMobileInput = false; // 是否隐藏原生键盘
   mainInputField.inputType = InputField.InputType.Standard;
   

---

🎨 自定义与样式调整

修改视觉样式

// 自定义输入框外观
Image backgroundImage = mainInputField.GetComponent<Image>();
backgroundImage.sprite = customSprite;
backgroundImage.color = Color.white;// 修改文本样式
TMP_Text textComponent = mainInputField.textComponent;
textComponent.fontSize = 24;
textComponent.color = Color.black;
textComponent.font = customFontAsset;

添加特殊功能

// 实现密码输入框
mainInputField.contentType = InputField.ContentType.Password;
mainInputField.characterLimit = 20;// 添加实时验证
mainInputField.onValueChanged.AddListener(ValidateInput);void ValidateInput(string input)
{if (input.Contains(" ")){mainInputField.text = input.Replace(" ", "");}
}

---

⚠️ 常见问题与解决方案

问题	原因	解决方案
输入文本不显示	Text组件未正确绑定	检查InputField的Text属性是否指向正确的Text对象
占位符不消失	Placeholder未正确设置	确保InputField的Placeholder属性指向正确的对象
文本显示不全	Text Area裁剪区域过小	调整Text Area的RectTransform尺寸
移动端无法输入	移动输入设置错误	检查shouldHideMobileInput和inputType设置

---

💡 使用技巧与最佳实践

1. 性能优化：

   • 对频繁更新的输入框使用对象池
   • 避免在onValueChanged中执行重操作

2. 用户体验：

   // 自动聚焦
   public void AutoFocusInputField()
   {mainInputField.ActivateInputField();mainInputField.Select();
   }// 回车键提交
   void Update()
   {if (Input.GetKeyDown(KeyCode.Return) && mainInputField.isFocused){SubmitForm();}
   }
   

3. 多平台适配：

   #if UNITY_IOS || UNITY_ANDROID
   mainInputField.shouldHideMobileInput = true;
   #else
   mainInputField.shouldHideMobileInput = false;
   #endif