网站首页 > 知识剖析 正文
输入框 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 属性,来限制用户的输入。
猜你喜欢
- 2025-09-24 JavaScript 如何压缩目录并上传?_js压缩上传图片
- 2025-09-24 2025前端面试题-React基础篇_前端react项目
- 2025-09-24 java之数据格式化_java实现格式化代码工具类
- 2025-09-24 零基础教你学前端——28,文字框与密码框
- 2025-09-24 Python 中 必须掌握的 20 个核心函数——input()函数
- 2025-09-24 关于 v-model 你需要知道的这一切
- 2025-09-24 SpringMVC学习--参数绑定_springmvc pojo参数绑定前后端
- 最近发表
-
- 不用Flexbox, 一行代码搞定CSS居中难题
- 使用 HTML、CSS 和 JS 创建令人惊叹的粒子背景效果
- CSS样式隔离:12个技巧让冲突率降低75%
- Python开发爬虫的常用技术架构_python网络爬虫开发
- DISMTools v0.5.1 Update 1_DISMTools v0.5.1 Update 16
- Spring MVC 完整配置指南:WebMvcConfigurer 实战全解析
- Python3 XML解析:探索数据交换与处理的高效工具(38)
- 《Java核心技术·卷 Ⅱ》知识点总结
- MyBatis3源码解析-执行SQL流程_mybatis3源码深度解析
- 印度计算机应急响应小组警告:谷歌Chrome、Zoho软件存在多个漏洞
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)