【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— TextInput文本输入组件

概述

TextInput为文本输入组件，用于接收用户输入的文本内容。

参数

TextInput组件的参数定义如下

TextInput(value?:{placeholder?: string|Resource , text?: string|Resource})

● placeholder

placeholder属性用于设置无输入时的提示文本，效果如下

● text

text用于设置输入框当前的文本内容，效果如下

---

常用属性

输入框类型

可通过type()方法设置输入框的类型，该方法的参数为InputType枚举类型，可选的枚举值有

InputType.Normal : 基本输入模式

InputType.Password : 密码输入模式

InputType.Number: 纯数字输入模式

光标样式
可通过caretColor()方法设置光标的颜色，效果如下

placeholder样式

可通过placeholderFont()和placeholderColor()方法设置 placeholder 的样式，其中placeholderFont()用于设置字体，包括字体大小、字体粗细等，placeholderColor()用于设置字体颜色，效果如下

文本样式

输入文本的样式可通过fontSize()、fontWeight()、fontColor()等通用属性方法进行设置。

@Entry
@Component
struct TextInputAttributePage {
  build() {
    Column({ space: 50 }) {

      Column({ space: 10 }) {
        Text('输入框类型')
        TextInput({ placeholder: '请输入任意内容' })
          .width('70%')
          .type(InputType.Normal)
        TextInput({ placeholder: '请输入数字' })
          .width('70%')
          .type(InputType.Number)
        TextInput({ placeholder: '请输入密码' })
          .width('70%')
          .type(InputType.Password)
      }

      Column({ space: 10 }) {
        Text('光标样式')
        TextInput()
          .width('70%')
          .caretColor(Color.Red)
      }

      Column({ space: 10 }) {
        Text('placeholder样式')
        TextInput({ placeholder: '请输入用户名' })
          .width('70%')
          .placeholderFont({ weight: 800 ,style:FontStyle.Italic})
          .placeholderColor('#66008000')
      }

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

常用事件

change事件

每当输入的内容发生变化，就会触发 change 事件，开发者可使用onChange()方法为TextInput组件绑定 change 事件，该方法的参数定义如下

onChange(callback: (value: string) => void)

其中value为用户输入的最新内容。

焦点事件

焦点事件包括获得焦点和失去焦点两个事件，当输入框获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件，开发者可使用onFocus()和onBlur()方法为 TextInput 组件绑定相关事件，两个方法的参数定义如下

onFocus(event: () => void)	
onBlur(event: () => void)