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

boyanx1天前技术教程1

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

相关文章

React v19 正式发布!(react15)

React 于 2024 年 12 月 06 日正式发布,为开发者带来了诸多令人兴奋的新特性和改进。下面对 React 19 版本中的核心更新和主要改进做一个快速介绍。React 19 核心更新Act...

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

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

制作简易页面计算器的详细教程和代码分享

今天教大家一个比较简单实用的Web小应用:简单计算器。这个案例比较简单、比较直观,适合小孩或者初学编程者进行编程入门的练习。用html进行入门编程练习优点非常多:IDE框架比较轻,VSCode安装方便...

高可用聊天系统设计方案(Hyperf实现)

一、系统架构设计1. 分层架构图 客户端 ↑↓ HTTP/WS API网关层(Nginx + Keepalived) ↑↓ RPC 业务服务集群 ↑↓ 数据层(MySQL Clus...

PuePy:将Python带入浏览器的革命性框架

在现代网络开发中,JavaScript无疑是主导地位的编程语言。但最近,随着WebAssembly和PyScript的崛起,Python的使用场景逐渐扩展到了前端开发领域。PuePy应运而生,作为一...

工作中常用且容易遗忘的 CSS 样式清单整理(一)

为大家精心准备了工作中常用的CSS样式,都是自己工作中常用到的记录发,分享给大家,如果觉得可以希望点赞关注和评论。废话不多说先上图:最后把源码奉献给大家<!DOCTYPE html> &l...

发表评论    

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