harmony学习TextInput输入文本组件

2024-03-13 21:36 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()
    })

当前文章价值2.61元,扫一扫支付后添加微信提供帮助!(如不能解决您的问题,可以申请退款)

你可能感兴趣的文章

来源:每日教程每日一例,深入学习实用技术教程,关注公众号TeachCourse
转载请注明出处: https://www.teachcourse.cn/3132.html ,谢谢支持!

资源分享

分类:harmony 标签:
如何生成类似新浪微博中的长图片 如何生成类似新浪微博中的长图片
Android系统搜索框架实战:提示最近查询内容 Android系统搜索框架实战:提示
ubuntu重新安装workpress ubuntu重新安装workpress
Window/Linux下Genymotion快捷键大全 Window/Linux下Genymotion快捷

评论已关闭!