编程技术文章分享与教程

网站首页 > 技术文章 正文

鸿蒙开发(二十五):输入框类型(鸿蒙系统方框)

hmc789 2024-11-17 11:21:11 技术文章 2 ℃

输入框 TextInput 一共有 5 种输入类型:

Normal

基本输入模式。

支持输入数字、字母、下划线、空格、特殊字符。

Password

密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。

Email

邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。

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)

运行结果:

从运行结果来看,眼睛不见了。

Email

邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。

示例:

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 属性,来限制用户的输入。

标签列表
最新留言