鸿蒙5.0版开发：ArkTS基础组件（TextInput）

最新推荐文章于 2025-04-24 13:18:43 发布
最新推荐文章于 2025-04-24 13:18:43 发布
阅读量1.7k 收藏 25
点赞数 20
分类专栏： 鸿蒙5.0 ArkUI ArkTS 文章标签： harmonyos 华为 android 鸿蒙 前端 ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_69424697/article/details/142425233
版权

往期鸿蒙全套实战文章必看：

TextInput

单行文本输入框组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

TextInput(value?: TextInputOptions)

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value TextInputOptions 否 TextInput组件参数。

TextInputOptions对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数名 参数类型 必填 参数描述
placeholder ResourceStr 否 设置无输入时的提示文本。
text ResourceStr 否 设置输入框当前的文本内容。
建议通过onChange事件将状态变量与文本实时绑定，
避免组件刷新时TextInput中的文本内容异常。
从API version 10开始，该参数支持$$双向绑定变量。
controller8+ TextInputController 否 设置TextInput控制器。

属性

除支持通用属性和文本通用属性的fontColor、fontSize、fontStyle、fontWeight、fontFamily外，还支持以下属性：

type

type(value: InputType)

设置输入框类型。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value InputType 是 输入框类型。
默认值：InputType.Normal

contentType12+

contentType(value: ContentType)

设置自动填充类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ContentType 是 自动填充类型。

placeholderColor

placeholderColor(value: ResourceColor)

设置placeholder文本颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceColor 是 placeholder文本颜色。
默认值：跟随主题。

placeholderFont

placeholderFont(value?: Font)

设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Font 否 placeholder文本样式。

enterKeyType

enterKeyType(value: EnterKeyType)

设置输入法回车键类型。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value EnterKeyType 是 输入法回车键类型。
默认值：EnterKeyType.Done

caretColor

caretColor(value: ResourceColor)

设置输入框光标颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceColor 是 输入框光标颜色。
默认值：‘#007DFF’

说明：
从API version 12开始，此接口支持设置文本手柄颜色，光标和文本手柄颜色保持一致。

maxLength

maxLength(value: number)

设置文本的最大输入字符数。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 文本的最大输入字符数。
默认值：Infinity，可以无限输入。
说明：
当不设置该属性或设置异常值时，取默认值，设置小数时，取整数部分。

inputFilter8+

inputFilter(value: ResourceStr, error?: (value: string) => void)

通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。

从API version 11开始，设置inputFilter且输入的字符不为空字符，会导致设置输入框类型(即type接口)附带的文本过滤效果失效。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceStr 是 正则表达式。
error (value: string) => void 否 正则匹配失败时，返回被过滤的内容。

copyOption9+

copyOption(value: CopyOptions)

设置输入的文本是否可复制。设置CopyOptions.None时，当前TextInput中的文字无法被复制或剪切，仅支持粘贴。

copyOption对于拖拽，只限制是否选中，不涉及拖拽范围。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value CopyOptions 是 输入的文本是否可复制。
默认值：CopyOptions.LocalDevice，支持设备内复制。

showPasswordIcon9+

showPasswordIcon(value: boolean)

设置当密码输入模式时，输入框末尾的图标是否显示。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value boolean 是 密码输入模式时，输入框末尾的图标是否显示。
默认值：true

style9+

style(value: TextInputStyle  | TextContentStyle)

设置输入框为默认风格或内联输入风格，内联输入风格只支持InputType.Normal类型。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value TextInputStyle | TextContentStyle 是 输入框为默认风格或内联输入风格。
默认值：TextInputStyle.Default

textAlign9+

textAlign(value: TextAlign)

设置文本在输入框中的水平对齐方式。

仅支持TextAlign.Start、TextAlign.Center和TextAlign.End。

可通过align属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部，Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中，Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value TextAlign 是 文本在输入框中的水平对齐方式。
默认值：TextAlign.Start

selectedBackgroundColor10+

selectedBackgroundColor(value: ResourceColor)

设置文本选中底板颜色。如果未设置不透明度，默认为20%不透明度。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceColor 是 文本选中底板颜色。
默认为20%不透明度。

caretStyle10+

caretStyle(value: CaretStyle)

设置光标风格。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value CaretStyle 是 光标的风格。

caretPosition10+

caretPosition(value: number)

设置光标位置。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 光标的位置。

showUnit10+

showUnit(value: CustomBuilder)

设置控件作为文本框单位。需搭配showUnderline使用，当

最低0.47元/天 解锁文章
HarmonyOS 讨论一下 TextInput的inputFilter正则表达式解决方案
weixin_45966674的博客
01-25 1293
然后 第二个是一个函数 它可以接到一个行参 如果错误时 第二个参数的方法才会执行 行参字符串类型输出被过滤的无效内容。我们 TextInput组件中有这样一个属性 inputFilter。第一个是字符串类型的 就是 正则表达式 你要怎么去匹配内容。我们给的正则是 /^\d+$/ 然后函数 输出 value。这边确实建议大家直接用 onChange操作 可能更直接一点。好像输入什么都过滤了 可能是正则写的有点问题。按官方文档的描述 它有两个行参。但是 这里好像有点BUG。
鸿蒙ArkTS声明式组件：【TextInput】
2401_82772199的博客
07-02 2117
单行文本输入框组件。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
4.ArkUI TextInput的介绍和使用
最新发布
长沙火山
04-24 394
TextInput 是 ArkUI 中用于文本输入的核心组件，支持单行、多行输入及多种输入格式控制。
OpenHarmony实战开发-如何实现文本输入 (TextInput/TextArea)
m0_70749039的博客
04-27 1384
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。
HarmonyOS系统开发ArkTS常用组件文本输入及参数（八）
qq_41946216的博客
03-20 3297
TextInput文本输入组件，用于接收用户输入的文本内容。
文本输入-TextInput
w0iloveyou的博客
07-27 398
单行文本输入框组件。TextInput
基础ArkTS组件：输入框，开关，评分条（HarmonyOS学习第三课【3.3】）
qq_58213084的博客
05-07 2450
(value?text?controller?value：输入框的提示样式设置，text：设置输入框的初始显示文本，不设置时显示的内容。：占位提示文本，当不设置 text 是，显示该文本。controller：光标控制器，设置光标的下标位置。})text: "你好呀"})样例运行结果如下图所示：TextInput组件用于文本输入，它只能单行文本输入，若文本超出自身长度则使用...在末尾替代。TextInputtype：表示输入框的类型，比如设置为。
鸿蒙5.0版开发：ArkTS组件-TextInput
m0_69424697的博客
11-12 688
单行文本输入框组件。
鸿蒙5.0版开发：ArkTS组件-自定义组件内置方法
m0_69424697的博客
12-04 970
自定义组件内置方法是由ArkUI开发框架提供给应用开发者的，定义在自定义组件基类上的API。
鸿蒙5.0版开发：ArkTS组件-自定义弹窗 (CustomDialog)
m0_69424697的博客
11-29 942
通过CustomDialogController类显示自定义弹窗。
鸿蒙5.0版开发：ArkTS基础组件（TextArea）
m0_69424697的博客
09-21 1636
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
鸿蒙开发：ArkTS Text 用法
10-17 998
ArkTS语言是鸿蒙生态的应用开发语言，它在TypeScript(简称TS)的基础上进行了扩展和优化，旨在提供更为简洁、自然且高性能的应用开发体验。在 ArkTS 中，Text(文本组件)用于在界面上显示文本内容。
【HarmonyOS NEXT】文本输入框TextInput如何监听自身是否获取焦点
Mayism123的博客
05-25 1306
2、当页面中存在TextInput的时候，进入页面该输入框会自动获取焦点，如何使用代码来控制一个输入框获取或者失去焦点呢？2、通过focusControl.requestFocus方法来主动申请焦点。1、文本输入框TextInput如何监听自身是否获取焦点？1、可以用onFocus事件来监听组件的获焦事件。TextInput / 获取焦点 / 失去焦点。
OpenHarmony实战开发-如何开发自定义输入框。
m0_70749039的博客
05-23 1121
输入框是一种常见的场景，开发者为了丰富其多样性，在输入框中的占位符、下划线做了相关处理。本文即为大家介绍如何开发自定义输入框。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件
zy0412326的专栏
12-22 1763
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput/TextArea输入框组件
ArkTS-ArkUI组件-TextInput组件
qq_74367835的博客
05-22 5420
ArkTS-ArkUI组件-TextInput组件
【HarmonyOS】HarmonyOS NEXT学习日记：三、初识ArkUI
九日的博客
07-17 1182
这里学习了一些常用的组件的用法、作为ArkUI的最小单位，熟悉了这些就能实现一些基本的页面。明天我打算再学习一些布局知识，这样就可以着手实现一个简单页面了。arkUI提供的基础组件不止上面提到的这些，详情可以查看官方文档，提供了更多的诸如富文本渲染、日期选择、svg等多种组件，需要的时候在查看文档，边用边学即可，没必要一口气学完。
鸿蒙应用ArkTS开发-实现登录注册功能
lovecspplon的博客
09-04 3150
HarmonyOS（鸿蒙操作系统）是华为公司开发的操作系统。它的设计初衷是为了应对当今多设备、多平台（1+8+N）的需求，为各种类型的设备提供一个统一的操作系统。：应用的全局配置信息，详见app.json5配置文件。entry：HarmonyOS工程模块，编译构建生成一个HAP包。：用于存放ArkTS源码。：应用/服务的入口。：应用提供扩展的备份恢复能力。：应用/服务包含的页面。：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
【鸿蒙实战开发教程】HarmonyOS开发中常用组件TextInput
HarmonyOS_001的博客
06-20 5392
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙arkts textinput 正则
03-04
### 关于鸿蒙 ArkTS 中 TextInput 组件使用正则表达式的说明 在鸿蒙ArkTS开发环境中，`TextInput`组件可以用于接收用户的输入并对其进行验证。为了确保用户输入的数据符合特定模式，通常会采用正则表达式来进行校验。 虽然提供的参考资料中并未直接提及如何在 `TextInput` 组件内应用正则表达式[^2]，但是可以根据一般的编程实践以及对其他平台的理解来构建一个合理的解决方案。下面给出一段基于假设的代码片段作为示例： ```typescript // 假设有一个名为 validateEmail 的函数用来匹配电子邮件地址格式 function validateEmail(email: string): boolean { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(String(email).toLowerCase()); } @Entry @Component struct EmailInputExample { @State emailValue: string = ''; build() { Column({ space: 8 }) { TextInput({ placeholder: '请输入邮箱', value: this.emailValue, onChange: (value) => { this.emailValue = value; // 实时检测输入是否合法 if (!validateEmail(value)) { console.log('非法的邮件地址'); } else { console.log('有效的邮件地址'); } }, onSubmit: () => { if (validateEmail(this.emailValue)) { console.log(`提交成功, 邮箱:${this.emailValue}`); } else { console.error('错误：无效的邮箱地址'); } } }) .width('90%') .margin({ top: 16 }); }.padding(16); } } ``` 此段代码展示了如何创建一个简单的表单字段，它接受电子邮箱形式的字符串输入，并通过调用外部定义好的 `validateEmail()` 函数即时检验输入的有效性。每当用户改变输入框中的内容或是尝试提交数据时都会触发相应的处理逻辑。 需要注意的是实际项目里应当参照最新的官方文档获取最准确的支持情况和最佳做法。对于更复杂的场景可能还需要考虑更多因素比如国际化字符集支持等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值