首页 > 代码库 > uGUI练习(七) InputField

uGUI练习(七) InputField

InputField 文本输入组件,下面来讲解一下InputField的属性及事件

一、属性

image

1、Character Limit:限制字符长度(0表示不限制),比如:设置只能输入3个字符(中文,英文,数字,符号都按1个字符来算),如下图所示

imageimageimageimage

2、Multi Line:多选显示

3、validation:验证输入类型

image

4、keyboardType:键盘类型

image

二、事件

1、onSubmit:当文本框提交时触发这个事件

2、onValidateInput:当在验证字符串是触发这个事件,可以用来当输入错误时及时提示

image

image

三、Submit练习

1、创建一个Panel,在Panel下创建一个InputField,两个Text,如下图所示

imageimage

2、设置InputFileld的Anchor为Bottom Center,其中一个Text命名为TextField,并把它设为 Stretch,并一个Text Anchor为Top Center

 

3、创建InputFieldScene.cs ,代码如下:

using UnityEngine;using UnityEngine.UI;using System.Collections;public class InputFieldScene : MonoBehaviour {    [SerializeField]    private InputField inputField;    [SerializeField]    private Text textField;    void Awake()    {        inputField.validation = InputField.Validation.Name;        inputField.keyboardType = TouchScreenKeyboardType.Default;    }    void Start()    {        inputField.onSubmit.AddListener(OnSubmit);    }    void OnSubmit(string text)    {        textField.text = textField.text + "\n\t\t\t\t" + text;        inputField.value = "";    }}<style type="text/css">.csharpcode, .csharpcode pre{	font-size: small;	color: black;	font-family: consolas, "Courier New", courier, monospace;	background-color: #ffffff;	/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {	background-color: #f4f4f4;	width: 100%;	margin: 0em;}.csharpcode .lnum { color: #606060; }</style>

其中上面的代码主要部分是在 OnSubmit(string text) 函数,就是 回车 提交事件。

4、把InputFieldScene绑定在InputField上,设置好参数

四、Submit效果

InputField

uGUI练习(七) InputField