鸿蒙开发(二十五):输入框类型(华为鸿蒙系统自带什么输入法)

boyanx4个月前技术教程15

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

相关文章

又一个布局利器,CSS 伪类 :placeholder-shown

一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。简单来说就是当...

手机网站常见问题总结(手机网站访问异常怎么解决)

一、h5网站input 设置为type=number的问题h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默...

仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑

幽蓝君发现一个问题,仓颉开发语言距离发布马上一年了,一些知名App已经使用仓颉开发了许多功能,但是网络上关于仓颉开发语言的教程少之又少,系统性的教程更是没有,仓颉官网的文档也远远不如ArkTS详尽。现...

阿东编程系列:APP使用用户名、密码和图片验证码进行登录

本期内容登录过程较为常见和简单,不再以视频的方式呈现(如果确实有需要,小伙伴可以发私信告知,到时候再录制视频)。这里给大家贴出代码和图片,方便小伙伴们去完成。1.APP端基于uni-app的登录页代...

input输入框最常用样式修改(input框不能修改)

input框有默认的样式,但在实际项目开发中,经常要根据美工的设计图对输入框的样式进行修改,这里把我在项目中最常用到的关于input样式修改的代码进行了整理,可以用于学习,也可直接运用。修改input...

用了三年 Vue,我终于理解为什么“组件设计”才是重灾区

一开始写 Vue 的时候,谁不是觉得:“哇,组件好优雅!”三年后再回头一看,组件目录像垃圾堆,维护一处改三处,props 乱飞、事件满天飞,复用全靠 copy paste。于是我终于明白 —— 组件设...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。