HarmonyOS Next 常用组件 TextInput

2025-06-23
北京
本文字数：896 字
阅读完需：约 3 分钟

InputType 枚举说明 Normal 基本输入模式，无特殊限制 Password 密码输入模式。密码显示小眼睛图标，默认输入文字短暂显示后变成圆点 Email 邮箱地址输入模式。支持数字、字母、下划线、小数点、!、#、$、%、&、'、"、*、+、-、/、=、?、^、`、{、 |、}、~，以及 @字符（只能存在一个 @字符） Number 纯数字输入模式 PhoneNumber 电话号码输入模式。支持输入数字、空格、+ 、-、*、#、(、)，长度不限 NUMBER_PASSWORD 纯数字密码输入模式。密码显示小眼睛图标，默认输入文字短暂显示后变成圆点 USER_NAME 用户名输入模式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充 NEW_PASSWORD 新密码输入模式。密码显示小眼睛图标，默认输入文字短暂显示后变成圆点 NUMBER_DECIMAL 带小数点的数字输入模式。支持数字，小数点（只能存在一个小数点） URL 带 URL 的输入模式

实现了一个简单登录用户名和密码输入

 TextInput({ placeholder: '密码' })              .type(this.isShowPwd ? InputType.Normal : InputType.Password)              .height('100%')              //去除默认圆角矩形背景              .backgroundColor(Color.Transparent)              //如果设置InputType.Password会默认显示 眼睛打开关闭的icon              .showPasswordIcon(false)              //可以通过下面的方法配置开关的图片 也可以不使用              .passwordIcon({                onIconSrc:'',                offIconSrc:''              })              .padding(0)              //输入文字大小颜色              .fontSize(13)              .fontColor(Color.White)              //光标颜色              .caretColor('#00D3D1')              //提示文字大小颜色              .placeholderColor(Color.White)              .placeholderFont({ size: 10, weight: FontWeight.Lighter })              .margin({ left: '28%', right: '15%' })              //输入回调              .onChange((value :string)=>{                password=value;              })