HarmonyOS Next常用组件 TextInput

2025-06-27 22:35:36

106次阅读

0个评论

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;
              })

收藏0赞0

请登录后评论。没有帐号？注册一个。

auhgnixgnahz

0回答
0粉丝
0关注