harmony学习TextInput输入文本组件

简单使用

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

@Component
struct 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)
  }
}

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

@Component
struct 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.cn
TextInput({ 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()
    })