输入框 TextInput 一共有 5 种输入类型:
Normal |
基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。 |
Password |
密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。 |
|
邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。 |
Number |
纯数字输入模式。 |
PhoneNumber |
电话号码输入模式。 支持输入数字、+ 、-、*、#,长度不限。 |
Normal
基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。
示例:
TextInput({ placeholder: "请输入内容" }) .type(InputType.Normal) .width(300) .height(50)
运行结果:
基本上什么都能输入,没有什么限制。
Password
密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。
示例:
TextInput({ placeholder: "请输入内容" }) .type(InputType.Password) .width(300) .height(50)
运行结果:
密码框,输入的内容不可见,点击右边的眼镜可切换可见模式。
当然了,我们也可以通过 showPasswordIcon 属性来主动设置这个眼睛是否启用。
TextInput({ placeholder: "请输入内容" }) .type(InputType.Password) .showPasswordIcon(false) .width(300) .height(50)
运行结果:
从运行结果来看,眼睛不见了。
邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。
示例:
TextInput({ placeholder: "请输入内容" }) .type(InputType.Email) .width(300) .height(50)
运行结果:
只能输入邮箱。
Number
纯数字输入模式。
示例:
TextInput({ placeholder: "请输入内容" }) .type(InputType.Number) .width(300) .height(50)
运行结果:
只能输入数字。
PhoneNumber
电话号码输入模式。
支持输入数字、+ 、-、*、#,长度不限。
示例:
TextInput({ placeholder: "请输入内容" }) .type(InputType.PhoneNumber) .width(300) .height(50)
运行结果:
只能输入电话号码格式。
至此,我们已经学会通过设置 TextInput 组件的 type 属性,来限制用户的输入。