网站首页 > 技术文章 正文
输入框 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 属性,来限制用户的输入。
- 上一篇: 前端基础学习之from表单的介绍和使用
- 下一篇: 鸿蒙网络编程系列4-实现Smtp邮件发送客户端
猜你喜欢
- 2024-11-17 fastapi+vue3文件上传(vue ftp上传)
- 2024-11-17 从零开始构建PDF阅读器(最简单的pdf阅读器)
- 2024-11-17 Dooring可视化之从零实现动态表单设计器
- 2024-11-17 在 FastAPI 中处理表单和用户输入:综合指南
- 2024-11-17 Laravel9表单的验证(validate表单验证)
- 2024-11-17 第63节 Form表单-Web前端开发之JavaScript-王唯
- 2024-11-17 Gateway结合Sentinel1.8限流熔断及自定义异常
- 2024-11-17 手机网站常见问题总结(手机网站出现错误怎么办)
- 2024-11-17 CSS实现去除Input框默认样式的详细教程
- 2024-11-17 企业必备实战之Sentinel规则Nacos持久化
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-