3.6、HarmonyOS Next 文本输入（TextInput/TextArea）

IT乐手2025-03-26 17:42

TextInput、TextArea 是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。

创建输入框

TextInput 为单行输入框、TextArea 为多行输入框。通过以下接口来创建。

对应代码

ts 复制代码

TextInput()

对应代码

ts 复制代码

TextArea()

TextInput 有5种可选类型，分别为 Normal 基本输入模式、Password 密码输入模式、Email 邮箱地址输入模式、Number 纯数字输入模式、PhoneNumber 电话号码输入模式。通过 type 属性进行设置：

ts 复制代码

TextInput()
  .type(InputType.Normal)

ts 复制代码

TextInput()
  .type(InputType.Password)

ts 复制代码

TextInput({placeholder:'我是提示文本'})

ts 复制代码

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})

ts 复制代码

TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
  .backgroundColor(Color.Pink)

文本框主要用于获取用户输入的信息，把信息处理成数据进行上传，绑定 onChange 事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作。

ts 复制代码

TextInput()
  .onChange((value: string) => {
    console.info(value);
  })
  .onFocus(() => {
    console.info('获取焦点');
  })