鸿蒙HarmonyOS NEXT开发：TextInput（基础组件）

于 2024-08-19 21:59:04 发布
阅读量349 收藏 12
点赞数 11
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141335862
版权
鸿蒙 同时被 2 个专栏收录
125 篇文章 0 订阅
订阅专栏
ArkTS
120 篇文章 0 订阅
订阅专栏

TextInput

单行文本输入框组件。

说明：

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

子组件

无

接口

TextInput(value?: TextInputOptions)

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

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

参数：

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

TextInputOptions对象说明

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

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

参数名参数类型必填参数描述
placeholderResourceStr否设置无输入时的提示文本。
textResourceStr否设置输入框当前的文本内容。
建议通过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

参数：

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

contentType12+

contentType(value: ContentType)

设置自动填充类型。

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

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

参数：

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

placeholderColor

placeholderColor(value: ResourceColor)

设置placeholder文本颜色。

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

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

参数：

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

placeholderFont

placeholderFont(value?: Font)

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

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

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

参数：

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

enterKeyType

enterKeyType(value: EnterKeyType)

设置输入法回车键类型。

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

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

参数：

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

caretColor

caretColor(value: ResourceColor)

设置输入框光标颜色。

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

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

参数：

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

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

maxLength

maxLength(value: number)

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

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

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

参数：

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

inputFilter8+

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

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

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

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

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

参数：

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

copyOption9+

copyOption(value: CopyOptions)

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

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

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

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

参数：

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

showPasswordIcon9+

showPasswordIcon(value: boolean)

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

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

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

参数：

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

style9+

style(value: TextInputStyle  | TextContentStyle)

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

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

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

参数：

参数名类型必填说明
valueTextInputStyle | 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

参数：

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

selectedBackgroundColor10+

selectedBackgroundColor(value: ResourceColor)

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

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

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

参数：

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

caretStyle10+

caretStyle(value: CaretStyle)

设置光标风格。

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

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

参数：

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

caretPosition10+

caretPosition(value: number)

设置光标位置。

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

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

参数：

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

showUnit10+

showUnit(value: CustomBuilder)

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

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

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

参数：

参数名类型必填说明
valueCustomBuilder是文本输入时，文本框的显示单位。

showError10+

showError(value?: ResourceStr | undefined)

设置错误状态下提示的错误文本或者不显示错误状态。

当参数类型为ResourceStr并且输入内容不符合定义规范时，提示错误文本，当提示错误单行文本超长时，末尾以省略号显示。当参数类型为undefined时，不显示错误状态。请参考示例2。

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

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

参数：

参数名类型必填说明
valueResourceStr | undefined否错误状态下提示的错误文本或者不显示错误状态。
默认不显示错误状态。
说明：
从API version 12开始，value支持Resource类型。

showUnderline10+

showUnderline(value: boolean)

设置是否开启下划线。下划线默认颜色为’#33182431’，默认粗细为1px，文本框尺寸48vp，下划线只支持InputType.Normal类型。

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

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

参数：

参数名类型必填说明
valueboolean是是否开启下划线。
默认值：false

underlineColor12+

underlineColor(value: ResourceColor|UnderlineColor|undefined)

开启下划线时，支持配置下划线颜色。

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

参数名类型必填说明
valueResourceColor | UnderlineColor | undefined是设置下划线颜色。
当设置下划线颜色模式时，修改下划线颜色。当只设定非特殊状态下的颜色，可以直接输入ResourceColor。设定值为undefined、null、无效值时，所有下划线恢复为默认值。
默认值：主题配置的下划线颜色。主题配置的默认下滑颜色为’#33182431’。

passwordIcon10+

passwordIcon(value: PasswordIcon)

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

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

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

参数：

参数名类型必填说明
valuePasswordIcon是密码输入模式时，输入框末尾的图标。
默认为系统提供的密码图标。

enableKeyboardOnFocus10+

enableKeyboardOnFocus(value: boolean)

设置TextInput通过点击以外的方式获焦时，是否绑定输入法。

从API version 10开始，获焦默认绑定输入法。

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

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

参数：

参数名类型必填说明
valueboolean是通过点击以外的方式获焦时，是否绑定输入法。
默认值：true

selectionMenuHidden10+

selectionMenuHidden(value: boolean)

设置长按、双击输入框或者右键输入框时，是否不弹出文本选择菜单。

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

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

参数：

参数名类型必填说明
valueboolean是长按、双击输入框或者右键输入框时，是否不弹出文本选择菜单。
默认值：false

barState10+

barState(value: BarState)

设置内联输入风格编辑态时滚动条的显示模式。

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

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

参数：

参数名类型必填说明
valueBarState是内联输入风格编辑态时滚动条的显示模式。
默认值：BarState.Auto

maxLines10+

maxLines(value: number)

设置内联输入风格编辑态时文本可显示的最大行数。

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

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

参数：

参数名类型必填说明
valuenumber是内联输入风格编辑态时文本可显示的最大行数。
默认值：3
取值范围：(0, +∞)

customKeyboard10+

customKeyboard(value: CustomBuilder, options?: KeyboardOptions)

设置自定义键盘。

当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件。

自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。

自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。

自定义键盘无法获取焦点，但是会拦截手势事件。

默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过TextInputController.stopEditing方法控制键盘关闭。

如果设备支持拍摄输入，设置自定义键盘后，该输入框会不支持拍摄输入。

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

参数：

参数名类型必填说明
valueCustomBuilder是自定义键盘。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
options12+KeyboardOptions否设置自定义键盘是否支持避让功能。

enableAutoFill11+

enableAutoFill(value: boolean)

设置是否启用自动填充。

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

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

参数：

参数名类型必填说明
valueboolean是是否启用自动填充。
true表示启用，false表示不启用。
默认值：true

passwordRules11+

passwordRules(value: string)

定义生成密码的规则。在触发自动填充时，所设置的密码规则会透传给密码保险箱，用于新密码的生成。

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

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

参数：

参数名类型必填说明
valuestring是定义生成密码的规则。

cancelButton11+

cancelButton(value: { style?: CancelButtonStyle, icon?: IconOptions })

设置右侧清除按钮样式。不支持内联模式。

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

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

参数：

参数名类型必填说明
value{
style? : CancelButtonStyle
icon?: IconOptions
}		是右侧清除按钮样式。
默认值：
{
style: CancelButtonStyle.INPUT
}

selectAll11+

selectAll(value: boolean)

设置当初始状态，是否全选文本。不支持内联模式。

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

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

参数：

参数名类型必填说明
valueboolean是是否全选文本。
默认值：false

showCounter11+

showCounter(value: boolean, options?: InputCounterOptions)

设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。

参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxLength（设置最大字符限制）一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。

当输入字符数大于最大字符数乘百分比值时，显示字符计数器。如果用户设置计数器时不设置InputCounterOptions，那么当前输入字符数超过最大字符数时，边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions，当thresholdPercentage数值在有效区间内，且输入字符数超过最大字符数时，边框和计数器下标将变为红色，框体抖动。highlightBorder设置为false，则不显示红色边框，计数器默认显示红色，框体抖动。

内联模式和密码模式下字符计数器不显示。

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

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

参数：

参数名类型必填说明
valueboolean是是否显示计数器。
options11+InputCounterOptions否计数器的百分比。

lineHeight12+

lineHeight(value: number | string | Resource)

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，number类型时单位为fp。

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

参数：

参数名类型必填说明
valuenumber | string | Resource是文本的文本行高。

decoration12+

decoration(value: TextDecorationOptions)

设置文本装饰线类型样式及其颜色。密码模式不生效。

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

参数：

参数名类型必填说明
valueTextDecorationOptions是文本装饰线对象。
默认值：{
 type: TextDecorationType.None,
 color: Color.Black,
 style: TextDecorationStyle.SOLID 
}

letterSpacing12+

letterSpacing(value: number | string | Resource)

设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。

当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。

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

参数：

参数名类型必填说明
valuenumber | string | Resource是文本字符间距。

fontFeature12+

fontFeature(value: string)

设置文字特性效果，比如数字等宽的特性。

格式为：normal | <feature-tag-value>

<feature-tag-value>的格式为：<string> [ <integer> | on | off ]

<feature-tag-value>的个数可以有多个，中间用’,'隔开。

例如，使用等宽数字的输入格式为：“ss01” on。

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

参数：

参数名类型必填说明
valuestring是文字特性效果。

设置 Font Feature 属性，Font Feature 是 OpenType 字体的高级排版能力，如支持连字、数字等宽等特性，一般用在自定义字体中，其能力需要字体本身支持。 更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/

说明： type属性中InputType枚举为Password、NEW_PASSWORD和NUMBER_PASSWORD等密码模式时，暂时不支持fontFeature设置文本样式。

wordBreak12+

wordBreak(value: WordBreak)

设置文本断行规则。该属性在组件设置内联模式时样式生效，但对placeholder文本无效。

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

参数：

参数名类型必填说明
valueWordBreak是内联输入风格编辑态时断行规则。
默认值：WordBreak.BREAK_WORD

说明：

组件不支持clip属性设置，设置该属性任意枚举值对组件文本截断无影响。

textOverflow12+

textOverflow(value: TextOverflow)

设置文本超长时的显示方式。仅在内联模式的编辑态、非编辑态下支持。

文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，wordBreak属性可设置为WordBreak.BREAK_ALL。

当overflow设置TextOverflow.None与TextOverflow.Clip效果一样。

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

参数：

参数名类型必填说明
valueTextOverflow是文本超长时的显示方式。
内联模式非编辑态下默认值：TextOverflow.Ellipsis
内联模式编辑态下默认值：TextOverflow.Clip

说明：
TextInput组件不支持设置TextOverflow.MARQUEE模式,当设置为TextOverflow.MARQUEE模式时 内联模式非编辑态下显示为TextOverflow.Ellipsis，内联模式编辑态下以及非内联模式下显示为TextOverflow.Clip

textIndent12+

textIndent(value: Dimension)

设置首行文本缩进。

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

参数：

参数名类型必填说明
valueDimension是首行文本缩进。
默认值：0

minFontSize12+

minFontSize(value: number | string | Resource)

设置文本最小显示字号。

需配合maxFontSize以及maxLines(组件设置为内联输入风格且编辑态时使用)或布局大小限制使用，单独设置不生效。

自适应字号生效时，fontSize设置不生效。

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

参数：

参数名类型必填说明
valuenumber | string | Resource是文本最小显示字号。

maxFontSize12+

maxFontSize(value: number | string | Resource)

设置文本最大显示字号。

需配合minFontSize以及maxLines(组件设置为内联输入风格且编辑态时使用)或布局大小限制使用，单独设置不生效。

自适应字号生效时，fontSize设置不生效。

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

参数：

参数名类型必填说明
valuenumber | string | Resource是文本最大显示字号。

heightAdaptivePolicy12+

heightAdaptivePolicy(value: TextHeightAdaptivePolicy)

组件设置为内联输入风格时，设置文本自适应高度的方式。

当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时，优先使用maxLines属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束，则尝试在minFontSize和maxFontSize的范围内缩小字体以显示更多文本。

当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时，优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中，则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小。

当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时，与TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST效果一样。

组件设置为非内联输入风格时，设置文本自适应高度(TextHeightAdaptivePolicy)的三种方式效果一样，即在minFontSize和maxFontSize的范围内缩小字体以显示更多文本。

说明：

组件设置为内联输入风格，编辑态与非编辑态存在字体大小不一致情况。

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

参数：

参数名类型必填说明
valueTextHeightAdaptivePolicy是文本自适应高度的方式。
默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST

showPassword12+

showPassword(visible: boolean)

设置密码的显隐状态。

需组合密码模式才能生效，非密码输入模式不生效。

由于小眼睛图标内置更新密码模式的状态，建议在onSecurityStateChange上增加状态同步。

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

参数：

参数名类型必填说明
visibleboolean是是否显示密码。
默认值：false

lineBreakStrategy12+

lineBreakStrategy(strategy: LineBreakStrategy)

设置折行规则。该属性在wordBreak不等于breakAll的时候生效，不支持连词符。

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

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

参数：

参数名类型必填说明
strategyLineBreakStrategy是文本的折行规则。
默认值：LineBreakStrategy.GREEDY
说明：
非Inline模式该属性不生效

说明：
默认情况下，通用属性padding的默认值为：
{
 top: ‘8vp’,
 right: ‘16vp’,
 bottom: ‘8vp’,
 left: ‘16vp’
}

输入框开启下划线模式时，通用属性padding的默认值为：
{
 top: ‘12vp’,
 right: ‘0vp’,
 bottom: ‘12vp’,
 left: ‘0vp’
}

从API version 10开始，单行输入框可设置.width(‘auto’)使组件宽度自适应文本宽度，自适应时组件宽度受constraintSize属性以及父容器传递的最大最小宽度限制，其余使用方式参考尺寸设置。

TextDecorationOptions12+对象说明

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

名称参数类型必填描述
typeTextDecorationType是设置文本装饰线类型。
color ResourceColor否设置文本装饰线颜色。
styleTextDecorationStyle否设置文本装饰线样式。

InputType枚举说明

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

名称描述
Normal基本输入模式，无特殊限制。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
Password密码输入模式。
支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
Email邮箱地址输入模式。
支持数字、字母、下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、{、|、}、~，以及@字符（只能存在一个@字符）。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
Number纯数字输入模式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
PhoneNumber9+电话号码输入模式。
支持输入数字、空格、+ 、-、*、#、(、)，长度不限。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
USER_NAME11+用户名输入模式。
在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
NEW_PASSWORD11+新密码输入模式。
密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。在已启用密码保险箱的情况下，支持自动生成新密码。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
NUMBER_PASSWORD11+纯数字密码输入模式。
密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
NUMBER_DECIMAL11+带小数点的数字输入模式。
支持数字，小数点（只能存在一个小数点）。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

ContentType12+枚举说明

自动填充类型。

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

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

名称值描述
USER_NAME0【用户名】在已启用密码保险箱的情况下，支持用户名的自动保存和自动填充。
PASSWORD1【密码】在已启用密码保险箱的情况下，支持密码的自动保存和自动填充。
NEW_PASSWORD2【新密码】在已启用密码保险箱的情况下，支持自动生成新密码。
FULL_STREET_ADDRESS3【详细地址】在已启用情景化自动填充的情况下，支持详细地址的自动保存和自动填充。
HOUSE_NUMBER4【门牌号】在已启用情景化自动填充的情况下，支持门牌号的自动保存和自动填充。
DISTRICT_ADDRESS5【区/县】在已启用情景化自动填充的情况下，支持区/县的自动保存和自动填充。
CITY_ADDRESS6【市】在已启用情景化自动填充的情况下，支持市的自动保存和自动填充。
PROVINCE_ADDRESS7【省】在已启用情景化自动填充的情况下，支持省的自动保存和自动填充。
COUNTRY_ADDRESS8【国家】在已启用情景化自动填充的情况下，支持国家的自动保存和自动填充。
PERSON_FULL_NAME9【姓名】在已启用情景化自动填充的情况下，支持姓名的自动保存和自动填充。
PERSON_LAST_NAME10【姓氏】在已启用情景化自动填充的情况下，支持姓氏的自动保存和自动填充。
PERSON_FIRST_NAME11【名字】在已启用情景化自动填充的情况下，支持名字的自动保存和自动填充。
PHONE_NUMBER12【手机号码】在已启用情景化自动填充的情况下，支持手机号码的自动保存和自动填充。
PHONE_COUNTRY_CODE13【国家代码】在已启用情景化自动填充的情况下，支持国家代码的自动保存和自动填充。
FULL_PHONE_NUMBER14【包含国家代码的手机号码】在已启用情景化自动填充的情况下，支持包含国家代码的手机号码的自动保存和自动填充。
EMAIL_ADDRESS15【邮箱地址】在已启用情景化自动填充的情况下，支持邮箱地址的自动保存和自动填充。
BANK_CARD_NUMBER16【银行卡号】在已启用情景化自动填充的情况下，支持银行卡号的自动保存和自动填充。
ID_CARD_NUMBER17【身份证号】在已启用情景化自动填充的情况下，支持身份证号的自动保存和自动填充。
NICKNAME23【昵称】在已启用情景化自动填充的情况下，支持昵称的自动保存和自动填充。
DETAIL_INFO_WITHOUT_STREET24【无街道地址】在已启用情景化自动填充的情况下，支持无街道地址的自动保存和自动填充。
FORMAT_ADDRESS25【标准地址】在已启用情景化自动填充的情况下，支持标准地址的自动保存和自动填充。

TextInputStyle9+枚举说明

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

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

名称描述
Default默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。
Inline内联输入风格。文本选中底板高度与输入框高度相同。
内联输入是在有明显的编辑态/非编辑态的区分场景下使用，例如：文件列表视图中的重命名。
不支持showError属性。

PasswordIcon10+对象说明

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

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

名称类型必填描述
onIconSrcstring | Resource否密码输入模式时，能够切换密码隐藏的显示状态的图标。
offIconSrcstring | Resource否密码输入模式时，能够切换密码显示的隐藏状态的图标。

事件

除支持通用事件外，还支持以下事件：

onChange

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

输入内容发生变化时，触发该回调。

触发该事件的条件：

1、键盘输入。

2、粘贴、剪切。

3、键盘快捷键Ctrl+v。

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

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

参数：

参数名类型必填说明
valuestring是当前输入的文本内容。

onSubmit

onSubmit(callback: (enterKey: EnterKeyType, event: SubmitEvent => void))

按下输入法回车键触发该回调。

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

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

参数：

参数名类型必填说明
enterKeyEnterKeyType是输入法回车键类型，类型为EnterKeyType.NEW_LINE时不触发onSubmit。
event11+SubmitEvent是提交事件。

onEditChanged(deprecated)

onEditChanged(callback: (isEditing: boolean) => void)

输入状态变化时，触发该回调。

从API 8开始废弃，建议使用onEditChange。

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

参数：

参数名类型必填说明
isEditingboolean是为true表示正在输入。

onEditChange8+

onEditChange(callback: (isEditing: boolean) => void)

输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。

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

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

参数：

参数名类型必填说明
isEditingboolean是为true表示正在输入。

onCopy8+

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

长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。

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

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

参数：

参数名类型必填说明
valuestring是复制的文本内容。

onCut8+

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

长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。

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

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

参数：

参数名类型必填说明
valuestring是剪切的文本内容。

onPaste

onPaste(callback:(value: string, event: PasteEvent) => void)

长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。

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

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

参数：

参数名类型必填说明
valuestring是粘贴的文本内容。
event11+PasteEvent否用户自定义的粘贴事件。

onTextSelectionChange10+

onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)

文本选择的位置发生变化时，触发该回调。

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

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

参数：

参数名类型必填说明
selectionStartnumber是所选文本的起始位置，文字的起始位置为0。
selectionEndnumber是所选文本的结束位置。

onContentScroll10+

onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)

文本内容滚动时，触发该回调。

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

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

参数：

参数名类型必填说明
totalOffsetXnumber是文本在内容区的横坐标偏移，单位px。
totalOffsetYnumber是文本在内容区的纵坐标偏移，单位px。

onSecurityStateChange12+

onSecurityStateChange(callback: Callback<boolean>)

密码显隐状态切换时，触发该回调。

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

参数：

参数名类型必填说明
callbackCallback<boolean>是回调函数。

TextInputController8+

TextInput组件的控制器继承自TextContentControllerBase。

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

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

导入对象

controller: TextInputController = new TextInputController()

caretPosition8+

caretPosition(value: number): void

设置输入光标的位置。

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

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

参数：

参数名参数类型必填参数描述
valuenumber是从字符串开始到光标所在位置的字符长度。

setTextSelection10+

setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void

设置文本选择区域并高亮显示。

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

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

参数：

参数名参数类型必填参数描述
selectionStartnumber是文本选择区域起始位置，文本框中文字的起始位置为0。
selectionEndnumber是文本选择区域结束位置。
options12+SelectionOptions否选中文字时的配置。
默认值：MenuPolicy.DEFAULT
从API version 12开始，该接口中的options参数支持在原子化服务中使用。

说明：

如果selectionStart或selectionEnd被赋值为undefined时，当作0处理。

如果selectionMenuHidden被赋值为true或设备为2in1时，即使options被赋值为MenuPolicy.SHOW，调用setTextSelection也不弹出菜单。

如果选中的文本含有emoji表情时，表情的起始位置包含在设置的文本选中区域内就会被选中。

stopEditing10+

stopEditing(): void

退出编辑态。

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

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

CaretOffset11+对象说明

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

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

参数名类型描述
indexnumber光标所在位置的索引值。
xnumber光标相对输入框的x坐标位值，单位px。
ynumber光标相对输入框的y坐标位值，单位px。

InputCounterOptions11+对象说明

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

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

参数名类型描述
thresholdPercentagenumberthresholdPercentage是可输入字符数占最大字符限制的百分比值。字符计数器显示的样式为当前输入字符数/最大字符数。当输入字符数大于最大字符数乘百分比值时，显示字符计数器。thresholdPercentage值的有效值区间为[1,100]，数值为小数时，向下取整，如果设置的number超出有效值区间内，不显示字符计数器。thresholdPercentage设置为undefined，显示字符计数器，但此参数不生效。
highlightBorderboolean如果用户设置计数器时不设置InputCounterOptions，那么当前输入字符数达到最大字符数时，边框和计数器下标将变为红色。如果用户设置显示字符计数器同时thresholdPercentage参数数值在有效区间内，那么当输入字符数超过最大字符数时，边框和计数器下标将变成红色。如果此参数为true，则显示红色边框。计数器默认显示红色边框。

SelectionOptions12+

setTextSelection选中文字时的配置。

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

名称类型必填说明
menuPolicyMenuPolicy否菜单弹出的策略。

UnderlineColor12+对象说明

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

参数名类型必填描述
typingResourceColor | undefined否键入时下划线颜色。不填写、undefined、null、无效值时恢复默认。
normalResourceColor | undefined否非特殊状态时下划线颜色。不填写、undefined、null、无效值时恢复默认。
errorResourceColor | undefined否错误时下划线颜色。不填写、undefined、null、无效值时恢复默认。此选项会修改showCounter属性中达到最大字符数时的颜色。
disableResourceColor | undefined否禁用时下划线颜色。不填写、undefined、null、无效值时恢复默认。

KeyboardOptions12+

设置自定义键盘是否支持避让功能。

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

名称类型必填描述
supportAvoidanceboolean否设置自定义键盘是否支持避让功能；默认值为false不支持避让，true为支持避让。

示例

示例1

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  @State passwordState: boolean = false
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width('95%')
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.log(JSON.stringify(e))
        })
        .onChange((value: string) => {
          this.text = value
        })
      Text(this.text)
      Button('Set caretPosition 1')
        .margin(15)
        .onClick(() => {
          // 将光标移动至第一个字符后
          this.controller.caretPosition(1)
        })
      Button('Get CaretOffset')
        .margin(15)
        .onClick(() => {
          this.positionInfo = this.controller.getCaretOffset()
        })
      // 密码输入框
      TextInput({ placeholder: 'input your password...' })
        .width('95%')
        .height(40)
        .margin(20)
        .type(InputType.Password)
        .maxLength(9)
        .showPasswordIcon(true)
        .showPassword(this.passwordState)
        .onSecurityStateChange(((isShowPassword: boolean) => {
          // 更新密码显示状态
          console.info('isShowPassword',isShowPassword)
          this.passwordState = isShowPassword
        }))
      // 邮箱地址自动填充类型
      TextInput({ placeholder: 'input your email...' })
        .width('95%')
        .height(40)
        .margin(20)
        .contentType(ContentType.EMAIL_ADDRESS)
        .maxLength(9)
      // 内联风格输入框
      TextInput({ text: 'inline style' })
        .width('95%')
        .height(50)
        .margin(20)
        .borderRadius(0)
        .style(TextInputStyle.Inline)
    }.width('100%')
  }
}
ts

示例2

@Entry
@Component
struct TextInputExample {
  @State PassWordSrc1: Resource = $r('app.media.onIcon')
  @State PassWordSrc2: Resource = $r('app.media.offIcon')
  @State TextError: string = ''
  @State Text: string = ''
  @State NameText: string = 'test'

  @Builder itemEnd() {
    Select([{ value: 'KB' },
      { value: 'MB' },
      { value: 'GB' },
      { value: 'TB', }])
      .height("48vp")
      .borderRadius(0)
      .selected(2)
      .align(Alignment.Center)
      .value('MB')
      .font({ size: 20, weight: 500 })
      .fontColor('#182431')
      .selectedOptionFont({ size: 20, weight: 400 })
      .optionFont({ size: 20, weight: 400 })
      .backgroundColor(Color.Transparent)
      .responseRegion({ height: "40vp", width: "80%", x: '10%', y: '6vp' })
      .onSelect((index: number) => {
        console.info('Select:' + index)
      })
  }

  build() {
    Column({ space: 20 }) {
      // 自定义密码显示图标
      TextInput({ placeholder: 'user define password icon' })
        .type(InputType.Password)
        .width(380)
        .height(60)
        .passwordIcon({ onIconSrc: this.PassWordSrc1, offIconSrc: this.PassWordSrc2 })
      // 下划线模式
      TextInput({ placeholder: 'underline style' })
        .showUnderline(true)
        .width(380)
        .height(60)
        .showError('Error')
        .showUnit(this.itemEnd)

      Text(`用户名：${this.Text}`)
        .width('95%')
      TextInput({ placeholder: '请输入用户名', text: this.Text })
        .showUnderline(true)
        .width(380)
        .showError(this.TextError)
        .onChange((value: string) => {
          this.Text = value
        })
        .onSubmit(() => { // 用户名不正确会清空输入框和用户名并提示错误文本
          if (this.Text == this.NameText) {
            this.TextError = ''
          } else {
            this.TextError = '用户名输入错误'
            this.Text = ''
          }
        })

    }.width('100%')
  }
}
ts

示例3

// xxx.ets
@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp')
    }
  }
}
ts

示例4

// xxx.ets
@Entry
@Component
struct ClearNodeExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ placeholder: 'input ...', controller: this.controller })
        .width(380)
        .height(60)
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: {
            size: 45,
            src: $r('app.media.icon'),
            color: Color.Blue
          }
        })
        .onChange((value: string) => {
          this.text = value
        })
    }
  }
}
ts

示例5

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
        .showUnderline(true)
		.showCounter(true, { thresholdPercentage: 50, highlightBorder: true })
		//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
        //如果用户当前输入字符数达到最大字符限制乘50%（thresholdPercentage）。字符计数器显示。
        //用户设置highlightBorder为false时，配置取消红色边框。不设置此参数时，默认为true。
        .onChange((value: string) => {
          this.text = value
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
ts

示例6

本示例展示如何在TextInput上将电话号码格式化为XXX XXXX XXXX

@Entry
@Component
struct phone_example {
  @State submitValue: string = ''
  @State text: string = ''
  public readonly NUM_TEXT_MAXSIZE_LENGTH = 13;

  isEmpty(str?: string): boolean {
    return str == 'undefined' || !str || !new RegExp("[^\\s]").test(str);
  }

  checkNeedNumberSpace(numText: string) {
    let isSpace: RegExp = new RegExp('[\\+;,#\\*]', 'g');
    let isRule: RegExp = new RegExp('^\\+.*');

    if (isSpace.test(numText)) {
      // 如果电话号码里有特殊字符，就不加空格
      if (isRule.test(numText)) {
        return true;
      } else {
        return false;
      }
    }
    return true;
  }

  removeSpace(str: string): string {
    if (this.isEmpty(str)) {
      return '';
    }
    return str.replace(new RegExp("[\\s]", "g"), '');
  }

  build() {
    Column() {
      Row() {
        TextInput({ text: `${this.text}` }).type(InputType.PhoneNumber).height('48vp')
          .onChange((number: string) => {
            let teleNumberNoSpace: string = this.removeSpace(number);
            if (teleNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) {
              this.text = teleNumberNoSpace;
            } else if (this.checkNeedNumberSpace(number)) {
              if (teleNumberNoSpace.length <= 3) {
                this.text = teleNumberNoSpace;
              } else {
                let split1: string = teleNumberNoSpace.substring(0, 3);
                let split2: string = teleNumberNoSpace.substring(3);
                this.text = split1 + ' ' + split2;
                if (teleNumberNoSpace.length > 7) {
                  split2 = teleNumberNoSpace.substring(3, 7);
                  let split3: string = teleNumberNoSpace.substring(7);
                  this.text = split1 + ' ' + split2 + ' ' + split3;
                }
              }
            } else {
              this.text = number;
            }
          })
      }
    }
    .width('100%')
    .height("100%")
  }
}
ts

示例7

本示例展示如何在下划线开启时，设置下划线颜色。

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        TextInput({placeholder:'提示文本内容'})
          .showUnderline(true)
          .underlineColor({normal:Color.Orange,typing:Color.Green,error:Color.Red,disable:Color.Gray});
        TextInput({placeholder:'提示文本内容'})
          .showUnderline(true)
          .underlineColor(Color.Gray);
      }
      .width('100%')
    }
    .height('100%')
  }
}
ts

示例8

示例展示设置不同wordBreak属性的TextInput样式。

// xxx.ets
@Entry
@Component
struct TextInputExample {
  build() {
    Column() {
      Text("TextInput为inline模式，WordBreakType属性为NORMAL的样式：").fontSize(16).fontColor(0xFF0000)
      TextInput({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .style(TextInputStyle.Inline) // Inline模式
        .wordBreak(WordBreak.NORMAL) // 非Inline模式该属性无效

      Text("TextInput为inline模式，英文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xFF0000)
      TextInput({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .style(TextInputStyle.Inline)
        .wordBreak(WordBreak.BREAK_ALL)

      Text("TextInput为inline模式，中文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xFF0000)
      TextInput({
        text: '多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。'
      })
        .fontSize(16)
        .style(TextInputStyle.Inline)
        .wordBreak(WordBreak.BREAK_ALL)

      Text("TextInput为inline模式，WordBreakType属性为BREAK_WORD的样式：").fontSize(16).fontColor(0xFF0000)
      TextInput({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .style(TextInputStyle.Inline)
        .wordBreak(WordBreak.BREAK_WORD)
    }
  }
}
ts

示例9

该示例实现了使用lineHeight设置文本的文本行高，使用letterSpacing设置文本字符间距，使用decoration设置文本装饰线样式。

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
        TextInput({text: 'lineHeight unset'})
          .border({ width: 1 }).padding(10).margin(5)
        TextInput({text: 'lineHeight 15'})
          .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
        TextInput({text: 'lineHeight 30'})
          .border({ width: 1 }).padding(10).margin(5).lineHeight(30)

        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
        TextInput({text: 'letterSpacing 0'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
        TextInput({text: 'letterSpacing 3'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
        TextInput({text: 'letterSpacing -1'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)

        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
        TextInput({text: 'LineThrough, Red'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
        TextInput({text: 'Overline, Red, DASHED'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED})
        TextInput({text: 'Underline, Red, WAVY'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}
ts

示例10

fontFeature属性使用示例，对比了fontFeature使用ss01属性和不使用ss01属性的效果。

@Entry
@Component
struct textInput {
  @State text1: string = 'This is ss01 on : 0123456789'
  @State text2: string = 'This is ss01 off: 0123456789'


  build() {
    Column(){
      TextInput({text: this.text1})
        .fontSize(20)
        .margin({top:200})
        .fontFeature("\"ss01\" on")
      TextInput({text : this.text2})
        .margin({top:10})
        .fontSize(20)
        .fontFeature("\"ss01\" off")
    }
    .width("90%")
    .margin("5%")
  }
}
ts

示例11

自定义键盘弹出发生避让示例

@Entry
@Component
struct Input {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""
  @State height1:string|number = '80%'
  @State supportAvoidance:boolean = true;
  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Row(){
        Button('x').onClick(() => {
          // 关闭自定义键盘
          this.controller.stopEditing()
        }).margin(10)
      }
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }
  build() {
    Column() {
      Row(){
        Button("20%")
          .fontSize(24)
          .onClick(()=>{
            this.height1 = "20%"
          })
        Button("80%")
          .fontSize(24)
          .margin({left:20})
          .onClick(()=>{
            this.height1 = "80%"
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      .height(this.height1)
      .width("100%")
      .padding({bottom:50})
      TextInput({ controller: this.controller, text: this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })

    }
  }
}
ts

示例12

该示例实现了使用minFontSize，maxFontSize及heightAdaptivePolicy设置文本自适应字号。

@Entry
@Component
struct TextInputExample {
  build() {
    Row() {
      Column() {
        Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
        TextInput({text: 'This is the text without the height adaptive policy set'})
          .width('80%').height(50).borderWidth(1).margin(1)
        TextInput({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(50).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
        TextInput({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(50).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
        TextInput({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(50).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}
ts

示例13

lineBreakStrategy使用示例，对比了不设置lineBreakStrategy与lineBreakStrategy设置不同挡位的效果。

@Entry
@Component
struct TextExample1 {
  @State message1: string = "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
    "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," +
    "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented.";

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
      Text('LineBreakStrategy.GREEDY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextInput({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .maxLines(5)
        .style(TextInputStyle.Inline)
        .lineBreakStrategy(LineBreakStrategy.GREEDY)
      Text('LineBreakStrategy.HIGH_QUALITY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextInput({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .maxLines(5)
        .style(TextInputStyle.Inline)
        .lineBreakStrategy(LineBreakStrategy.HIGH_QUALITY)
      Text('LineBreakStrategy.BALANCED').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextInput({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .maxLines(5)
        .style(TextInputStyle.Inline)
        .lineBreakStrategy(LineBreakStrategy.BALANCED)
    }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
  }
}
ts

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

 

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

蜀道叁QAQ
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
HarmonyOS应用开发：TextInput（基础组件）
situnanQAQ的博客
06-12 1042
单行文本输入框组件。
鸿蒙HarmonyOS NEXT开发：尺寸设置（ArkTS组件事件）
shudaoshanBBQ的博客
08-07 759
用于设置组件的宽高、边距。
鸿蒙HarmonyOS NEXT开发：位置设置（ArkTS组件事件）
shudaoshanBBQ的博客
08-07 836
设置组件的对齐方式、布局方向和显示位置。
鸿蒙HarmonyOS NEXT开发：拖拽事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 817
拖拽事件指组件被长按后拖拽时触发的事件。
鸿蒙HarmonyOS NEXT开发：PatternLock（基础组件）
shudaoshanBBQ的博客
08-16 712
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。
鸿蒙HarmonyOS NEXT开发：焦点事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 742
焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
鸿蒙HarmonyOS NEXT开发：Search（基础组件）
shudaoshanBBQ的博客
08-18 706
搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
鸿蒙HarmonyOS NEXT开发：TextArea（基础组件）
最新发布
shudaoshanBBQ的博客
08-19 249
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
鸿蒙HarmonyOS NEXT开发：焦点控制（ArkTS通用属性）
shudaoshanBBQ的博客
08-09 974
自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件
鸿蒙的技术博客
08-14 1282
通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。
HarmonyOS Developer之生成二维码
weixin_47988426的博客
08-14 432
生成二维码
HarmonyOS 开发
一个大佬的博客
08-18 377
【代码】HarmonyOS 开发。
鸿蒙开发Location Kit（位置服务）如何设置
A1551143530的博客
08-13 590
鸿蒙Location Kit 是一个强大的位置服务工具包，允许开发者在应用程序中集成精确的定位功能。Location Kit 提供了多种定位模式，支持室内和室外定位，并结合了GPS、Wi-Fi、蓝牙和基站等多种定位技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值