3.6、HarmonyOS Next 文本输入(TextInput/TextArea)

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

创建输入框

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:'我是当前文本内容'})

添加 backgroundColor 改变输入框的背景颜色。

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

添加事件

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

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

上一篇 3.5、文本显示(Text/Span) 下一篇 3.7、自定义弹窗(CustomDialog)

相关推荐
ifeng091844 分钟前
HarmonyOS实战项目:打造智能家居控制中心(设备发现与控制)
wpf·智能家居·harmonyos
ifeng09183 小时前
HarmonyOS分布式数据管理——跨设备数据同步实战
harmonyos
ifeng09184 小时前
HarmonyOS实战项目:开发一个分布式新闻阅读客户端
分布式·wpf·harmonyos
小范馆4 小时前
通过 useEventBus 和 useEventCallBack 实现与原生 Android、鸿蒙、iOS 的事件交互
android·ios·harmonyos
爱笑的眼睛115 小时前
HarmonyOS Text组件样式定制深度解析:从基础到高级实践
华为·harmonyos
ChinaDragon6 小时前
HarmonyOS:弹出框层级管理
harmonyos
爱笑的眼睛116 小时前
鸿蒙应用开发:华为静默登录解决方案
华为·harmonyos
用户498888174376 小时前
ArkTS 语言基础 第九节:接口与抽象
harmonyos
纯爱掌门人7 小时前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
白鹿第一帅7 小时前
【案例实战】鸿蒙元服务开发实战:从云原生到移动端,包大小压缩 96% 启动提速 75% 的轻量化设计
harmonyos·白鹿第一帅·鸿蒙元服务·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·鸿蒙元服务框架