harmony学习TextInput输入文本组件

简单使用

封装一个文本输入框，左边是文字描述，右边是文本输入框，包含提示文字，限制文字的长度，限制输入内容为文本类型

@Componentstruct DzEditText {  build() {    Row() {      Text(\\\"用户名：\\\")        .textAlign(TextAlign.End)        .width(\\\'20%\\\')        .height(\\\'100%\\\')      TextInput({ placeholder: \\\'请输入用户名\\\' })//提示文字        .layoutWeight(1)//布局权重        .maxLength(20)//限制最大长度20个字符        .type(InputType.Normal)//文本类型        .height(\\\'100%\\\')//占满父组件高度    }.width(\\\'100%\\\')    .height(80)    .padding({bottom:12})    .margin(10)  }}

密码输入框限制为输入密码类型

@Componentstruct DzPswEditText {  build() {    Row() {      Text(\\\"密码：\\\")        .textAlign(TextAlign.End)        .width(\\\'20%\\\')        .height(\\\'100%\\\')      TextInput({ placeholder: \\\'请输入密码\\\' })//提示文字        .layoutWeight(1)//布局权重        .maxLength(20)//限制最大长度20个字符        .type(InputType.Password)//文本类型        .height(\\\'100%\\\')//占满父组件高度    }.width(\\\'100%\\\')    .height(80)    .padding({bottom:12})    .margin(10)  }}

运行效果：

InputType支持的文本类型：- Normal ，默认文本类型- Number ，数字类型- PhoneNumber ，输入的为手机号码- Email ，输入的为邮箱- Password ，输入的为密码类型

事件处理

接收输入的文本内容，使用 onChange() 方法

// cody by每日教程teachcourse.cnTextInput({ placeholder: \\\'请输入密码\\\' })//提示文字    .layoutWeight(1)//布局权重    .maxLength(20)//限制最大长度20个字符    .type(InputType.Password)//文本类型    .height(\\\'100%\\\')//占满父组件高度    .onChange((text)=>{      this.content=text    })

接收键盘按下回车键，使用 onSubmit()

//code by每日教程teachcourse.cn  TextInput({ placeholder: \\\'请输入密码\\\' })//提示文字    .layoutWeight(1)//布局权重    .maxLength(20)//限制最大长度20个字符    .type(InputType.Password)//文本类型    .height(\\\'100%\\\')//占满父组件高度    .onSubmit((key)=>{      commit()    })