HarmonyOS Next常用组件 TextInput 原创

auhgnixgnahz

发布于 2025-6-20 16:34

浏览

0收藏

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

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

 TextInput({ placeholder: '用户名' })
              .height('100%')
              .maxLength(11)
              .backgroundColor(Color.Transparent)
              .padding(0)
              .fontSize(13)
              .fontColor(Color.White)
              .caretColor('#00D3D1')
              .placeholderColor(Color.White)
              .placeholderFont({ size: 10, weight: FontWeight.Lighter })
              .margin({ left: '28%', right: '10%' })
              .type(InputType.Number)
              .onChange((value :string)=>{
                mobile=value;
              })
 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;
              })

HarmonyOS Next常用组件 TextInput-鸿蒙开发者社区