输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
API参考

TextInput

更新时间: 2026-07-09 02:26
本文导读
子组件
接口
TextInputOptions对象说明
属性
type
placeholderColor
placeholderFont
enterKeyType
caretColor
maxLength
fontColor
fontSize
fontStyle
fontWeight
fontFamily
inputFilter8+
copyOption9+
showPasswordIcon9+
style9+
textAlign9+
textDirection23+
selectedBackgroundColor10+
caretStyle10+
caretPosition10+
showUnit10+
showError10+
showUnderline10+
passwordIcon10+
enableKeyboardOnFocus10+
selectionMenuHidden10+
barState10+
maxLines10+
customKeyboard10+
enableAutoFill11+
enableSelectedDataDetector22+
passwordRules11+
cancelButton11+
selectAll11+
showCounter11+
contentType12+
underlineColor12+
lineHeight12+
decoration12+
letterSpacing12+
fontFeature12+
wordBreak12+
textOverflow12+
textIndent12+
minFontSize12+
maxFontSize12+
heightAdaptivePolicy12+
showPassword12+
lineBreakStrategy12+
editMenuOptions12+
enablePreviewText12+
enableHapticFeedback13+
autoCapitalizationMode20+
keyboardAppearance15+
strokeWidth20+
strokeColor20+
stopBackPress15+
halfLeading18+
minFontScale18+
maxFontScale18+
cancelButton18+
ellipsisMode18+
enableAutoFillAnimation20+
enableAutoSpacing20+
compressLeadingPunctuation23+
orphanCharOptimization
includeFontPadding23+
fallbackLineSpacing23+
selectedDragPreviewStyle23+
InputType枚举说明
ContentType枚举说明12+
TextInputStyle枚举说明9+
PasswordIcon对象说明10+
EnterKeyType枚举说明
事件
onChange
onSubmit
onEditChanged(deprecated)
onEditChange8+
onCopy8+
onWillCopy
onCut8+
onWillCut
onPaste8+
onTextSelectionChange10+
onContentScroll10+
onSecurityStateChange12+
onWillInsert12+
onDidInsert12+
onWillDelete12+
onDidDelete12+
onWillChange15+
onWillAttachIME20+
TextInputController8+
导入对象
constructor8+
caretPosition8+
setTextSelection10+
stopEditing10+
UnderlineColor对象说明12+
SubmitEvent11+
属性
keepEditableState11+
OnPasteCallback18+
OnSubmitCallback18+
OnTextSelectionChangeCallback18+
OnContentScrollCallback18+
示例
示例1（设置与获取光标位置）
示例2（设置下划线）
示例3（设置自定义键盘）
示例4（设置右侧清除按钮样式）
示例5（设置计数器）
示例6（电话号码格式化）
示例7（设置文本断行规则）
示例8（设置文本样式）
示例9（设置文字特性效果）
示例10（自定义键盘避让）
示例11（设置文本自适应）
示例12（设置折行规则）
示例13（支持插入和删除回调）
示例14（文本扩展自定义菜单）
示例15（设置symbol类型清除按钮）
示例16（文本设置省略模式）
示例17（输入框支持输入状态变化等回调）
示例18（设置最小字体范围与最大字体范围）
示例19（设置选中指定区域的文本内容）
示例20（设置文本描边）
示例21（设置中西文自动间距）
示例22（设置字符计数颜色以及超出字符颜色）
示例23（设置placeholder富文本样式）
示例24（设置输入法扩展信息）
示例25（设置内联输入风格编辑态时滚动条的显示模式）
示例26（设置行首标点压缩）
示例27（设置自适应间距）
示例28（设置文本拖拽时的背板样式）
示例29（删除文本框内的最后一个字符）
示例30（设置文本排版方向）
示例31（将指定范围的文字滚动到可视区内）
示例32（设置文本排版时是否使能孤字优化）
示例33（设置文本选择的AI菜单）
展开章节

单行文本输入框组件。

说明

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

该组件仅支持单文本样式，若需实现富文本样式，建议使用RichEditor组件。

子组件

PhonePC/2in1TabletTVWearable

无

接口

PhonePC/2in1TabletTVWearable

TextInput(value?: TextInputOptions)

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

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

参数：

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

TextInputOptions对象说明

PhonePC/2in1TabletTVWearable

TextInput初始化参数。

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

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

展开
名称 类型 只读 可选 说明
placeholder ResourceStr 否 是 设置无输入时的提示文本。
text ResourceStr 否 是

设置输入框当前的文本内容。

建议通过onChange事件将状态变量与文本实时绑定，

避免组件刷新时TextInput中的文本内容异常。

从API version 10开始，该参数支持$$双向绑定变量。

从API version 18开始，该参数支持!!双向绑定变量。
controller8+ TextInputController 否 是 设置TextInput控制器。

属性

PhonePC/2in1TabletTVWearable

除支持通用属性，还支持以下属性：

说明

默认情况下，通用属性padding的默认值为：

{

top: '8vp',

right: '16vp',

bottom: '8vp',

left: '16vp'

}

输入框开启下划线模式时，通用属性padding的默认值为：

{

top: '12vp',

right: '0vp',

bottom: '12vp',

left: '0vp'

}

当输入框设置padding为0时，可设置borderRadius为0避免光标被截断。当光标在文本框边缘显示异常时，请检查是否是padding、borderRadius属性影响造成。

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

type

PhonePC/2in1TabletTVWearable

type(value: InputType)

设置输入框类型。

不同的InputType会拉起对应类型的键盘，同时限制输入。

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

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

参数：

展开
参数名 类型 必填 说明
value InputType 是

输入框类型。

默认值：InputType.Normal
说明

密码填充服务需要特定的输入框类型。如何使用密码填充服务参考快速适配。

设置密码模式时，装饰线decoration、下划线showUnderline不生效。

placeholderColor

PhonePC/2in1TabletTVWearable

placeholderColor(value: ResourceColor)

设置placeholder文本颜色。

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

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

参数：

展开
参数名 类型 必填 说明
value ResourceColor 是

placeholder文本颜色。

默认值：跟随主题。

Wearable设备上默认值为：'#99ffffff'

placeholderFont

PhonePC/2in1TabletTVWearable

placeholderFont(value?: Font)

设置placeholder文本样式，包括字体大小、字体粗细、字体族、字体风格。

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

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

参数：

展开
参数名 类型 必填 说明
value Font 否

placeholder文本样式。

Wearable设备上默认值为：18fp
说明

可以使用loadFontSync注册自定义字体。

enterKeyType

PhonePC/2in1TabletTVWearable

enterKeyType(value: EnterKeyType)

设置输入法回车键类型。

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

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

参数：

展开
参数名 类型 必填 说明
value EnterKeyType 是

输入法回车键类型。

默认值：EnterKeyType.Done

caretColor

PhonePC/2in1TabletTVWearable

caretColor(value: ResourceColor)

设置输入框光标颜色。

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

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

参数：

展开
参数名 类型 必填 说明
value ResourceColor 是

输入框光标颜色。

默认值：'#007DFF'
说明

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

maxLength

PhonePC/2in1TabletTVWearable

maxLength(value: number)

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

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

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

参数：

展开
参数名 类型 必填 说明
value number 是

文本的最大输入字符数。

默认值：Infinity，可以无限输入。

说明：

当不设置该属性或设置异常值时，取默认值，设置小数时，取整数部分，设置值超过2^31-1时，可能导致异常行为。

fontColor

PhonePC/2in1TabletTVWearable

fontColor(value: ResourceColor)

设置字体颜色。

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

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

参数：

展开
参数名 类型 必填 说明
value ResourceColor 是

字体颜色。

Wearable设备上默认值为：'#dbffffff'

fontSize

PhonePC/2in1TabletTVWearable

fontSize(value: Length)

设置字体大小。

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

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

参数：

展开
参数名 类型 必填 说明
value Length 是

字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串。

Wearable设备上默认值为：18fp

fontStyle

PhonePC/2in1TabletTVWearable

fontStyle(value: FontStyle)

设置字体样式。

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

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

参数：

展开
参数名 类型 必填 说明
value FontStyle 是

字体样式。

默认值：FontStyle.Normal

fontWeight

PhonePC/2in1TabletTVWearable

fontWeight(value: number | FontWeight | ResourceStr)

设置文本的字体粗细，设置过大可能会在不同字体下有截断。

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

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

参数：

展开
参数名 类型 必填 说明
value number | FontWeight | ResourceStr 是

文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。

默认值：FontWeight.Normal

从API version 20开始，支持Resource类型。

fontFamily

PhonePC/2in1TabletTVWearable

fontFamily(value: ResourceStr)

设置字体列表。

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

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

参数：

展开
参数名 类型 必填 说明
value ResourceStr 是

字体列表。默认字体'HarmonyOS Sans'。

使用多个字体时，请用逗号','分隔，字体的优先级按顺序生效。例如：'Arial,HarmonyOS Sans'。

应用当前支持'HarmonyOS Sans'字体和自定义字体。

卡片当前仅支持'HarmonyOS Sans'字体。
说明

推荐使用loadFontSync注册自定义字体。

inputFilter8+

PhonePC/2in1TabletTVWearable

inputFilter(value: ResourceStr, error?: Callback<string>)

通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。

单字符输入场景仅支持单字符匹配，多字符输入场景支持字符串匹配，例如粘贴。

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

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

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

参数：

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

copyOption9+

PhonePC/2in1TabletTVWearable

copyOption(value: CopyOptions)

设置输入的文本是否可复制。设置CopyOptions.None时，只支持粘贴和全选。

设置CopyOptions.None时，不允许拖拽。

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

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

参数：

展开
参数名 类型 必填 说明
value CopyOptions 是

输入的文本是否可复制。

默认值：CopyOptions.LocalDevice，支持设备内复制。

showPasswordIcon9+

PhonePC/2in1TabletTVWearable

showPasswordIcon(value: boolean)

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

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

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

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

true表示显示，false表示不显示。

默认值：TV设备为false，其他设备为true。

style9+

PhonePC/2in1TabletTVWearable

style(value: TextInputStyle | TextContentStyle)

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

输入框类型介绍请参考type接口。

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

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

参数：

展开
参数名 类型 必填 说明
value TextInputStyle | TextContentStyle 是

输入框为默认风格或内联输入风格。

默认值：TextInputStyle.Default

textAlign9+

PhonePC/2in1TabletTVWearable

textAlign(value: TextAlign)

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

支持TextAlign.Start、TextAlign.Center和TextAlign.End。TextAlign.JUSTIFY的对齐方式按照TextAlign.Start处理。

可通过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
说明

textAlign只能调整文本整体的布局，不影响字符的显示顺序。若需要调整字符的显示顺序，请参考镜像状态字符对齐。

textDirection23+

PhonePC/2in1TabletTVWearable

textDirection(direction: TextDirection | undefined)

指定文本排版方向，未通过该接口设置时，默认文本排版方向遵循组件布局方向。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
direction TextDirection | undefined 是

文本排版方向。

设置为undefined时，按照TextDirection.DEFAULT处理，表现为文本排版方向遵循组件布局方向。

selectedBackgroundColor10+

PhonePC/2in1TabletTVWearable

selectedBackgroundColor(value: ResourceColor)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value ResourceColor 是 文本选中底板颜色。

caretStyle10+

PhonePC/2in1TabletTVWearable

caretStyle(value: CaretStyle)

设置光标风格。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

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

当同时设置caretColor属性和caretStyle属性中的color参数时，遵循后设置生效原则。

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

caretPosition10+

PhonePC/2in1TabletTVWearable

caretPosition(value: number)

设置光标位置。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number 是

光标的位置。

第一个字符前的位置是0。

showUnit10+

PhonePC/2in1TabletTVWearable

showUnit(value: CustomBuilder)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

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

showError10+

PhonePC/2in1TabletTVWearable

showError(value?: ResourceStr | undefined)

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

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value ResourceStr | undefined 否

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

默认不显示错误状态。

Wearable设备上字体大小为：13fp，对齐方式为：居中对齐

说明：

从API version 12开始，value支持Resource类型。

showUnderline10+

PhonePC/2in1TabletTVWearable

showUnderline(value: boolean)

设置是否开启下划线。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

是否开启下划线。

true表示开启，false表示不开启。

默认值：false

下划线默认颜色为'#33182431'，默认粗细为1px，文本框尺寸48vp，下划线只支持InputType.Normal类型。
说明

设置密码模式时，装饰线decoration、下划线showUnderline不生效。

passwordIcon10+

PhonePC/2in1TabletTVWearable

passwordIcon(value: PasswordIcon)

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

支持jpg、png、bmp、heic和webp类型的图片格式。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value PasswordIcon 是

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

默认为系统提供的密码图标。

该图标的固定尺寸为24vp，Wearable设备上默认值为28vp，若引用的图标过大或过小，均显示为固定尺寸。

enableKeyboardOnFocus10+

PhonePC/2in1TabletTVWearable

enableKeyboardOnFocus(value: boolean)

设置TextInput通过点击以外的方式获焦时，是否主动拉起软键盘。

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

通过点击以外的方式获焦时，是否主动拉起软键盘。

true表示主动拉起软键盘，false表示不主动拉起。

默认值：TV设备为false，其他设备为true。

selectionMenuHidden10+

PhonePC/2in1TabletTVWearable

selectionMenuHidden(value: boolean)

设置是否隐藏系统文本选择菜单。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

是否隐藏系统文本选择菜单。

设置为true时，单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框，隐藏系统文本选择菜单。

设置为false时，显示系统文本选择菜单。

默认值：false

barState10+

PhonePC/2in1TabletTVWearable

barState(value: BarState)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value BarState 是

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

默认值：BarState.Auto

maxLines10+

PhonePC/2in1TabletTVWearable

maxLines(value: number)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number 是

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

默认值：3

取值范围：(0, UINT32_MAX]

customKeyboard10+

PhonePC/2in1TabletTVWearable

customKeyboard(value: CustomBuilder | ComponentContent | undefined, options?: KeyboardOptions)

设置自定义键盘。

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

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

自定义键盘采用覆盖原始界面的方式呈现，当没有开启避让模式或者输入框不需要避让的场景不会对应用原始界面产生压缩或者上提。

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

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

当设置自定义键盘时，可以通过绑定onKeyPreIme事件规避物理键盘的输入。

从API version 23开始，自定义键盘可以通过setCustomKeyboardContinueFeature开启接续，在切换至其他自定义键盘时，会直接切换，不会触发键盘关闭和拉起动画。

说明

该接口不支持在attributeModifier中调用。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value CustomBuilder | ComponentContent22+ | undefined22+ 是 自定义键盘。设定值为undefined时，关闭自定义键盘。
options12+ KeyboardOptions 否 设置自定义键盘是否支持避让功能。

enableAutoFill11+

PhonePC/2in1TabletTVWearable

enableAutoFill(value: boolean)

设置是否启用自动填充。典型场景参考密码自动填充服务、智能填充服务。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

是否启用自动填充。

true表示启用，false表示不启用。

默认值：true

enableSelectedDataDetector22+

PhonePC/2in1TabletTVWearable

enableSelectedDataDetector(enable: boolean | undefined)

设置是否对选中文本进行实体识别。该接口依赖设备底层应具有文本识别能力，否则设置不会生效。

当enableSelectedDataDetector设置为true时，默认识别所有类型的实体。

启用后可识别选区中的邮件、电话、网址、日期、地址等，并在文本选择菜单中展示对应的AI菜单项。默认启用AI菜单功能。

AI菜单功能启用时，在组件中选中文本后，文本选择菜单能够展示对应的AI菜单项，包括TextMenuItemId中的url（打开链接）、email（新建邮件）、phoneNumber（呼叫）、address（导航前往）、dateTime（新建日程）。

AI菜单生效时，选中范围内需包括且仅包括一个完整的AI实体，才能展示对应的选项。该菜单项与TextMenuItemId中的askAI菜单项不同时出现。

需要CopyOptions为CopyOptions.LocalDevice或CopyOptions.CROSS_DEVICE时，本功能生效。

元服务API： 从API version 22开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enable boolean | undefined 是

是否开启选中文本实体识别。

true：开启识别，false：关闭识别。默认值为：true。

值为undefined时，按默认值处理。

passwordRules11+

PhonePC/2in1TabletTVWearable

passwordRules(value: string)

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

具体使用指导请参考为应用添加自动生成高强度密码的建议。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

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

cancelButton11+

PhonePC/2in1TabletTVWearable

cancelButton(options: CancelButtonOptions)

设置右侧清除按钮样式，仅支持图片类型的图标。不支持内联模式。示例请参考示例4（设置右侧清除按钮样式）。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
options CancelButtonOptions 是

右侧清除按钮样式选项。

默认值：

{

style: CancelButtonStyle.INPUT

}

Wearable设备上默认值为：28vp

selectAll11+

PhonePC/2in1TabletTVWearable

selectAll(value: boolean)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

是否全选文本。

true表示会全选文本，false表示不会全选文本。

默认值：false

showCounter11+

PhonePC/2in1TabletTVWearable

showCounter(value: boolean, options?: InputCounterOptions)

设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。未调用showCounter接口时，默认不显示计数器。

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

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

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

示例5（设置计数器）展示了设置showCounter的效果。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value boolean 是

是否显示计数器。

true表示显示计数器，false表示不显示。
options InputCounterOptions 否 计数器的配置项。

contentType12+

PhonePC/2in1TabletTVWearable

contentType(value: ContentType)

设置自动填充类型。典型场景参考智能填充服务。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

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

underlineColor12+

PhonePC/2in1TabletTVWearable

underlineColor(value: ResourceColor|UnderlineColor|undefined)

设置下划线颜色。

开启输入框下划线showUnderline时，支持配置下划线颜色。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value ResourceColor | UnderlineColor | undefined 是

设置下划线颜色。

当设置下划线颜色模式时，修改下划线颜色。当只设定非特殊状态下的颜色，可以直接输入ResourceColor。设定值为undefined、null、无效值时，所有下划线恢复为默认值。

默认值：主题配置的下划线颜色。主题配置的默认下划线颜色为'#33182431'。

lineHeight12+

PhonePC/2in1TabletTVWearable

lineHeight(value: number | string | Resource)

设置文本的行高。

设置值不大于0时，不限制文本行高，自适应字体大小，number类型时单位为fp。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。

说明

  • 特殊字符字体高度远超出同行的其他字符高度时，文本框出现截断、遮挡、内容相对位置发生变化等不符合预期的显示异常，需要开发者调整组件高度、行高等属性，修改对应的页面布局。

  • 设置密码模式时，通过该接口设置行高lineHeight不生效。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number | string | Resource 是 文本行高。

decoration12+

PhonePC/2in1TabletTVWearable

decoration(value: TextDecorationOptions)

设置文本装饰线类型样式及其颜色。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value TextDecorationOptions 是

文本装饰线对象。

默认值：{

type: TextDecorationType.None,

color: Color.Black,

style: TextDecorationStyle.SOLID,

thicknessScale: 1.0

}
说明

当文字的下边缘轮廓与装饰线位置相交时，会触发下划线避让规则，下划线将在这些字符处避让文字。常见“gjyqp”等英文字符。

当文本装饰线的颜色设置为Color.Transparent时，装饰线颜色设置为跟随每行第一个字的字体颜色。当文本装饰线的颜色设置为透明色16进制对应值“#00FFFFFF”时，装饰线颜色设置为透明色。

设置密码模式时，装饰线decoration、下划线showUnderline不生效。

letterSpacing12+

PhonePC/2in1TabletTVWearable

letterSpacing(value: number | string | Resource)

设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。

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

对每个字符生效，包括行尾字符。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number | string | Resource 是

文本字符间距。

单位：fp

fontFeature12+

PhonePC/2in1TabletTVWearable

fontFeature(value: string)

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

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

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

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

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value string 是 文字特性效果。

Font Feature当前支持的属性参见fontFeature属性列表。

设置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/。

说明

设置密码模式时，不支持通过fontFeature设置文本样式。

wordBreak12+

PhonePC/2in1TabletTVWearable

wordBreak(value: WordBreak)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value WordBreak 是

内联输入风格编辑态时断行规则。

默认值：WordBreak.BREAK_WORD
说明

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

textOverflow12+

PhonePC/2in1TabletTVWearable

textOverflow(value: TextOverflow)

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

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

当overflow设置为TextOverflow.None时，效果与TextOverflow.Clip相同。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value TextOverflow 是

文本超长时的显示方式。

内联模式非编辑态下默认值：TextOverflow.Ellipsis

内联模式编辑态下默认值：TextOverflow.Clip
说明

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

未设置内联模式时，按照默认风格显示。若此时设置textOverflow，则不生效。

textIndent12+

PhonePC/2in1TabletTVWearable

textIndent(value: Dimension)

设置首行文本缩进。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value Dimension 是

首行文本缩进。

默认值：0

单位：vp

取值范围：大于等于0。设置负数时，按默认值处理。

minFontSize12+

PhonePC/2in1TabletTVWearable

minFontSize(value: number | string | Resource)

设置文本最小显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。

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

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

minFontSize小于或等于0时，自适应字号不生效，此时按照fontSize属性的值生效，未设置时按照其默认值生效。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number | string | Resource 是

文本最小显示字号。

单位：fp

maxFontSize12+

PhonePC/2in1TabletTVWearable

maxFontSize(value: number | string | Resource)

设置文本最大显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。

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

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

maxFontSize小于等于0或者maxFontSize小于minFontSize时，自适应字号不生效，此时按照fontSize属性的值生效，未设置时按照其默认值生效。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number | string | Resource 是

文本最大显示字号。

单位：fp

heightAdaptivePolicy12+

PhonePC/2in1TabletTVWearable

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的范围内缩小字体以显示更多文本。

说明

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value TextHeightAdaptivePolicy 是

文本自适应高度的方式。

默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST

showPassword12+

PhonePC/2in1TabletTVWearable

showPassword(visible: boolean)

设置密码的显隐状态。

当InputType设置为Password、NEW_PASSWORD和NUMBER_PASSWORD模式时，密码保护功能才能生效。非密码输入模式则不会触发该功能。

密码模式时，由于输入框后端的状态和前端应用侧的状态管理变量会不一致，可能导致末尾图标的状态异常。建议在onSecurityStateChange上增加状态同步。参考示例1（设置与获取光标位置）。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
visible boolean 是

是否显示密码。

true表示会显示密码，false表示不会显示密码。

默认值：false

lineBreakStrategy12+

PhonePC/2in1TabletTVWearable

lineBreakStrategy(strategy: LineBreakStrategy)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
strategy LineBreakStrategy 是

文本的折行规则。

默认值：LineBreakStrategy.GREEDY

说明：

仅设置内联模式时该属性生效。

editMenuOptions12+

PhonePC/2in1TabletTVWearable

editMenuOptions(editMenu: EditMenuOptions)

设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。

调用disableMenuItems或disableSystemServiceMenuItems接口屏蔽文本选择菜单内的系统服务菜单项时，editMenuOptions接口内回调方法onCreateMenu的入参列表中不包含被屏蔽的菜单选项。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
editMenu EditMenuOptions 是 扩展菜单选项。

enablePreviewText12+

PhonePC/2in1TabletTVWearable

enablePreviewText(enable: boolean)

设置是否开启输入预上屏。

预上屏内容定义为文字暂存态，目前不支持文字拦截功能。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enable boolean 是

是否开启输入预上屏。

true表示开启输入预上屏，false表示不开启输入预上屏。

默认值：true
说明

“预上屏”描述的是一种文字暂存状态。需要在输入法中开启预上屏功能，在输入文本过程中，未确认输入候选词时，文本框中显示标记文本。例如，通过拼音输入中文时，未确定候选词之前，在输入框中显示拼音字母，该状态称为文字预上屏。

enableHapticFeedback13+

PhonePC/2in1TabletTVWearable

enableHapticFeedback(isEnabled: boolean)

设置是否开启触控反馈。

开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段以开启振动权限，配置如下：

收起
自动换行
深色代码主题
复制
  1. "requestPermissions": [
  2.  {
  3.     "name": "ohos.permission.VIBRATE"
  4.  }
  5. ]

元服务API： 从API version 13开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
isEnabled boolean 是

是否开启触控反馈。

true表示开启触控反馈，false表示不开启触控反馈。

默认值：true

autoCapitalizationMode20+

PhonePC/2in1TabletTVWearable

autoCapitalizationMode(mode: AutoCapitalizationMode)

设置自动大小写模式的文本模式，只提供接口能力，具体实现以输入法应用为主。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
mode AutoCapitalizationMode 是 自动大小写模式，默认状态无效。

keyboardAppearance15+

PhonePC/2in1TabletTVWearable

keyboardAppearance(appearance: Optional<KeyboardAppearance>)

设置输入框拉起的键盘样式，需要输入法适配后生效。具体参考输入法应用沉浸模式。

元服务API： 从API version 15开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
appearance Optional<KeyboardAppearance> 是

键盘样式。

默认值：KeyboardAppearance.NONE_IMMERSIVE

strokeWidth20+

PhonePC/2in1TabletTVWearable

strokeWidth(width: Optional<LengthMetrics>)

设置文本描边的宽度。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
width Optional<LengthMetrics> 是

文本描边的宽度。如果LengthMetrics的unit值是PERCENT，当前设置不生效，按默认值处理。

若设置值小于0，显示实心字；若大于0，显示空心字。

默认值为0，不做描边处理。

strokeColor20+

PhonePC/2in1TabletTVWearable

strokeColor(color: Optional<ResourceColor>)

设置文本描边的颜色。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
color Optional<ResourceColor> 是 描边颜色。默认值为字体颜色，设置异常值时取默认值。

stopBackPress15+

PhonePC/2in1TabletTVWearable

stopBackPress(isStopped: Optional<boolean>)

设置是否阻止返回键传递。

元服务API： 从API version 15开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
isStopped Optional<boolean> 是

是否阻止返回键。

true表示阻止，false表示不阻止。

默认值：true。异常值取默认值。

halfLeading18+

PhonePC/2in1TabletTVWearable

halfLeading(halfLeading: Optional<boolean>)

设置文本在行内垂直居中，将行间距平分至行的顶部与底部。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
halfLeading Optional<boolean> 是

设置文本是否垂直居中。

true表示将行间距平分至行的顶部与底部，false则不平分。

默认值：false

minFontScale18+

PhonePC/2in1TabletTVWearable

minFontScale(scale: Optional<number | Resource>)

设置文本最小的字体缩放倍数。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
scale Optional<number | Resource> 是

文本最小的字体缩放倍数，支持undefined类型。

取值范围：[0, 1]

说明：

设置的值小于0时，按值为0处理。设置的值大于1，按值为1处理。异常值默认不生效。

使用前需在工程中配置configuration.json文件和app.json5文件，具体详见示例18（设置最小字体范围与最大字体范围）。

maxFontScale18+

PhonePC/2in1TabletTVWearable

maxFontScale(scale: Optional<number | Resource>)

设置文本最大的字体缩放倍数。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
scale Optional<number | Resource> 是

文本最大的字体缩放倍数，支持undefined类型。

取值范围：[1, +∞)

说明：

设置的值小于1时，按值为1处理。异常值默认不生效。

当设置maxFontScale属性后，showError最多放大到2倍。

使用前需在工程中配置configuration.json文件和app.json5文件，具体详见示例18（设置最小字体范围与最大字体范围）。

cancelButton18+

PhonePC/2in1TabletTVWearable

cancelButton(symbolOptions: CancelButtonSymbolOptions)

设置右侧清除按钮样式，仅支持symbol图标。不支持内联模式。示例请参考示例15（设置symbol类型清除按钮）。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
symbolOptions CancelButtonSymbolOptions 是

右侧清除按钮样式。

默认值：

{

style: CancelButtonStyle.INPUT

}

ellipsisMode18+

PhonePC/2in1TabletTVWearable

ellipsisMode(mode: Optional<EllipsisMode>)

设置省略位置。ellipsisMode属性仅在内联模式下生效，需要配合overflow设置为TextOverflow.Ellipsis使用，单独设置ellipsisMode属性不生效。

非编辑态时正常生效，编辑态时EllipsisMode.START和EllipsisMode.CENTER仅在maxLines设置为1时生效，EllipsisMode.END、EllipsisMode.MULTILINE_START和EllipsisMode.MULTILINE_CENTER正常生效。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
mode Optional<EllipsisMode> 是

省略位置。

默认值：EllipsisMode.END

enableAutoFillAnimation20+

PhonePC/2in1TabletTVWearable

enableAutoFillAnimation(enabled: Optional<boolean>)

设置是否启用自动填充动效。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enabled Optional<boolean> 是

是否启用自动填充动效。

true表示启用，false表示不启用。

默认值：true

说明：

启用之后，仅输入模式InputType设置为Password、NEW_PASSWORD或NUMBER_PASSWORD的输入框在进行自动填充时动效可生效。

enableAutoSpacing20+

PhonePC/2in1TabletTVWearable

enableAutoSpacing(enabled: Optional<boolean>)

设置是否开启中文与西文的自动间距。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enabled Optional<boolean> 是

是否开启中文与西文的自动间距。

true为开启自动间距，false为不开启。

默认值：false

compressLeadingPunctuation23+

PhonePC/2in1TabletTVWearable

compressLeadingPunctuation(enabled: Optional<boolean>)

设置是否开启行首标点符号压缩。

说明

  • 行首标点符号默认不压缩。

  • 支持压缩的标点符号，请参考ParagraphStyle的行首压缩的标点范围。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enabled Optional<boolean> 是

是否开启行首标点符号压缩。

true表示开启行首标点符号压缩；false表示不开启行首标点符号压缩。

orphanCharOptimizationBeta

PhonePC/2in1TabletTVWearable

orphanCharOptimization(enabled: Optional<boolean>)

设置文本排版时是否使能孤字优化。不通过该接口设置，默认不使能孤字优化。

孤字优化通过更高效地处理孤立字符（段落尾行首字符）来改善文本布局。使能后，它会调整换行点以尽可能避免孤立字符。孤字优化特性需在wordBreak为非BREAK_ALL并且待排版文本首个TextStyle的locale为“zh-Hans”或“zh-Hant”时生效。

起始版本： 26.0.0

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

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

参数：

展开
参数名 类型 必填 说明
enabled Optional<boolean> 是

段落最后一行是否使能孤字优化。

true表示使能孤字优化，false表示不使能孤字优化。

值为undefined或null时，不使能孤字优化。

includeFontPadding23+

PhonePC/2in1TabletTVWearable

includeFontPadding(include: Optional<boolean>)

设置是否在首行和尾行增加间距以避免文字截断。不通过该接口设置，默认不增加间距。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
include Optional<boolean> 是

是否在首行和尾行增加间距以避免文字截断。

true表示在首行和尾行增加间距；false表示在首行和尾行不增加间距。

fallbackLineSpacing23+

PhonePC/2in1TabletTVWearable

fallbackLineSpacing(enabled: Optional<boolean>)

针对多行文字叠加，支持行高基于文字实际高度自适应。此接口仅当行高小于文字实际高度时生效。不通过该接口设置，默认行高不基于文字实际高度自适应。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enabled Optional<boolean> 是

行高是否基于文字实际高度自适应。

true表示行高基于文字实际高度自适应；false表示行高不基于文字实际高度自适应。

selectedDragPreviewStyle23+

PhonePC/2in1TabletTVWearable

selectedDragPreviewStyle(value: SelectedDragPreviewStyle | undefined)

设置文本输入框内文本拖拽时的背板样式。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value SelectedDragPreviewStyle | undefined 是

文本拖拽时的背板样式。

设置为undefined时：背板颜色跟随主题，浅色模式显示白色，深色模式显示黑色。

InputType枚举说明

PhonePC/2in1TabletTVWearable

单行文本输入框类型。

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

展开
名称 值 说明
Normal 0

基本输入模式，无特殊限制。

内联输入风格只支持InputType.Normal类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Number 2

纯数字输入模式。

不支持负数、小数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
PhoneNumber9+ 3

电话号码输入模式。

支持输入数字、空格、+ 、-、*、#、(、)，长度不限。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Email 5

邮箱地址输入模式。

支持数字、字母、下划线、小数点、!、#、$、%、&、'、"、*、+、-、/、=、?、^、`、{、|、}、~，以及@字符（只能存在一个@字符）。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Password 7

密码输入模式。

默认输入文字短暂显示后变成圆点。从API version 12开始，PC/2in1设备上输入文字直接显示为圆点。

TV设备上输入框末尾默认不显示小眼睛图标，其他设备输入框末尾默认显示小眼睛图标。

密码输入模式中，decoration、showUnderline、lineHeight不生效。

在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
NUMBER_PASSWORD11+ 8

纯数字密码输入模式。

默认输入文字短暂显示后变成圆点。从API version 12开始，PC/2in1设备上输入文字直接显示为圆点。

TV设备上输入框末尾默认不显示小眼睛图标，其他设备输入框末尾默认显示小眼睛图标。

密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。

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

模型约束： 此接口仅可在Stage模型下使用。
USER_NAME11+ 10

用户名输入模式，无特殊限制。

在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。

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

模型约束： 此接口仅可在Stage模型下使用。
NEW_PASSWORD11+ 11

新密码输入模式，无特殊限制。

默认输入文字短暂显示后变成圆点。从API version 12开始，PC/2in1设备上输入文字直接显示为圆点。

TV设备上输入框末尾默认不显示小眼睛图标，其他设备输入框末尾默认显示小眼睛图标。

在已启用密码保险箱的情况下，支持自动生成新密码。

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

模型约束： 此接口仅可在Stage模型下使用。
NUMBER_DECIMAL11+ 12

带小数点的数字输入模式。

支持数字，小数点（只能存在一个小数点）。不支持负数小数，负数小数的数字输入模式请使用inputFilter实现。

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

模型约束： 此接口仅可在Stage模型下使用。
URL12+ 13

带URL的输入模式，无特殊限制。

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

模型约束： 此接口仅可在Stage模型下使用。
ONE_TIME_CODE20+ 14

验证码输入模式，无特殊限制。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

ContentType12+枚举说明

PhonePC/2in1TabletTVWearable

自动填充类型。

模型约束： 此接口仅可在Stage模型下使用。

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

展开
名称 值 说明
USER_NAME 0

【用户名】在已启用密码保险箱的情况下，支持用户名的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PASSWORD 1

【密码】在已启用密码保险箱的情况下，支持密码的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
NEW_PASSWORD 2

【新密码】在已启用密码保险箱的情况下，支持自动生成新密码。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
FULL_STREET_ADDRESS 3

【详细地址】在已启用情景化自动填充的情况下，支持详细地址的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
HOUSE_NUMBER 4

【门牌号】在已启用情景化自动填充的情况下，支持门牌号的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
DISTRICT_ADDRESS 5

【区/县】在已启用情景化自动填充的情况下，支持区/县的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
CITY_ADDRESS 6

【市】在已启用情景化自动填充的情况下，支持市的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PROVINCE_ADDRESS 7

【省】在已启用情景化自动填充的情况下，支持省的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
COUNTRY_ADDRESS 8

【国家】在已启用情景化自动填充的情况下，支持国家的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PERSON_FULL_NAME 9

【姓名】在已启用情景化自动填充的情况下，支持姓名的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PERSON_LAST_NAME 10

【姓氏】在已启用情景化自动填充的情况下，支持姓氏的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PERSON_FIRST_NAME 11

【名字】在已启用情景化自动填充的情况下，支持名字的自动保存和自动填充。

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

【手机号码】在已启用情景化自动填充的情况下，支持手机号码的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PHONE_COUNTRY_CODE 13

【国家代码】在已启用情景化自动填充的情况下，支持国家代码的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
FULL_PHONE_NUMBER 14

【包含国家代码的手机号码】在已启用情景化自动填充的情况下，支持包含国家代码的手机号码的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
EMAIL_ADDRESS 15

【邮箱地址】在已启用情景化自动填充的情况下，支持邮箱地址的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
BANK_CARD_NUMBER 16

【银行卡号】在已启用情景化自动填充的情况下，支持银行卡号的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
ID_CARD_NUMBER 17

【身份证号】在已启用情景化自动填充的情况下，支持身份证号的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
NICKNAME 23

【昵称】在已启用情景化自动填充的情况下，支持昵称的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
DETAIL_INFO_WITHOUT_STREET 24

【无街道地址】在已启用情景化自动填充的情况下，支持无街道地址的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
FORMAT_ADDRESS 25

【标准地址】在已启用情景化自动填充的情况下，支持标准地址的自动保存和自动填充。

元服务API： 从API version 12开始，该接口支持在元服务中使用。
PASSPORT_NUMBER18+ 26

【护照号】在已启用情景化自动填充的情况下，支持护照号的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
VALIDITY18+ 27

【护照有效期】在已启用情景化自动填充的情况下，支持护照有效期的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
ISSUE_AT18+ 28

【护照签发地】在已启用情景化自动填充的情况下，支持护照签发地的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
ORGANIZATION18+ 29

【发票抬头名称】在已启用情景化自动填充的情况下，支持发票抬头名称的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
TAX_ID18+ 30

【税号】在已启用情景化自动填充的情况下，支持税号的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
ADDRESS_CITY_AND_STATE18+ 31

【所在地区】在已启用情景化自动填充的情况下，支持所在地区的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
FLIGHT_NUMBER18+ 32

【航班号】暂不支持自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
LICENSE_NUMBER18+ 33

【驾驶证号】暂不支持自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
LICENSE_FILE_NUMBER18+ 34

【驾驶证档案编号】暂不支持自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
LICENSE_PLATE18+ 35

【车牌号】在已启用情景化自动填充的情况下，支持车牌号的自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
ENGINE_NUMBER18+ 36

【行驶证发动机号】暂不支持自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。
LICENSE_CHASSIS_NUMBER18+ 37

【车牌识别号】暂不支持自动保存和自动填充。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

TextInputStyle9+枚举说明

PhonePC/2in1TabletTVWearable

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

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

展开
名称 说明
Default 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。
Inline

内联输入风格。文本选中底板高度与输入框高度相同。

内联输入是在有明显的编辑态/非编辑态的区分场景下使用，例如：文件列表视图中的重命名。

不支持showError属性。

内联模式下，不支持拖入文本。

PasswordIcon10+对象说明

PhonePC/2in1TabletTVWearable

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

模型约束： 此接口仅可在Stage模型下使用。

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

展开
名称 类型 只读 可选 说明
onIconSrc string | Resource 否 是

密码输入模式时，能够切换密码可见时显示的图标。

string格式可用于加载网络图片和本地图片。
offIconSrc string | Resource 否 是

密码输入模式时，能够切换密码不可见时显示的图标。

string格式可用于加载网络图片和本地图片。

EnterKeyType枚举说明

PhonePC/2in1TabletTVWearable

输入法回车键类型。

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

展开
名称 值 说明
Go 2

显示为开始样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Search 3

显示为搜索样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Send 4

显示为发送样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Next 5

显示为下一步样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
Done 6

显示为完成样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
PREVIOUS11+ 7

显示为上一步样式。

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

模型约束： 此接口仅可在Stage模型下使用。
NEW_LINE11+ 8

显示为换行样式。

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

模型约束： 此接口仅可在Stage模型下使用。

事件

PhonePC/2in1TabletTVWearable

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

onChange

PhonePC/2in1TabletTVWearable

onChange(callback: EditableTextOnChangeCallback)

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

在本回调中，若执行了光标操作，需要开发者在预上屏场景下依据previewText参数调整光标逻辑，以适应预上屏场景。

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

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

参数：

展开
参数名 类型 必填 说明
callback EditableTextOnChangeCallback 是 当前输入文本内容变化时的回调。

onSubmit

PhonePC/2in1TabletTVWearable

onSubmit(callback: OnSubmitCallback)

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

非TV设备按下回车键时输入框默认会失焦且收起键盘，可在OnSubmitCallback回调中配置是否收起键盘，参考示例2（设置下划线）。

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

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

参数：

展开
参数名 类型 必填 说明
callback OnSubmitCallback 是 提交回调。

onEditChanged(deprecated)

PhonePC/2in1TabletTVWearable

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

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

说明

从API version 7开始支持，从API version 8开始废弃，建议使用onEditChange替代。

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

参数：

展开
参数名 类型 必填 说明
isEditing boolean 是

当前是否正在输入中。

true表示正在输入；false表示当前没有输入。

onEditChange8+

PhonePC/2in1TabletTVWearable

onEditChange(callback: Callback<boolean>)

输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。

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

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

参数：

展开
参数名 类型 必填 说明
callback Callback<boolean> 是 输入状态变化回调，返回值为true表示输入框处于编辑态，返回值为false表示输入框处于非编辑态。

onCopy8+

PhonePC/2in1TabletTVWearable

onCopy(callback: Callback<string>)

进行复制操作时，触发该回调。

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

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

参数：

展开
参数名 类型 必填 说明
callback Callback<string> 是 复制回调，其返回值为复制的文本内容。

onWillCopyBeta

PhonePC/2in1TabletTVWearable

onWillCopy(callback: Callback<string, boolean>)

在进行复制操作前，触发该回调。

起始版本： 26.0.0

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<string, boolean> 是 复制操作前的回调。回调参数类型为string时，表示将要被复制的文本内容。回调参数类型为boolean时，表示当前选中文本是否允许被复制，true：允许文本被复制；false：不允许文本被复制。

onCut8+

PhonePC/2in1TabletTVWearable

onCut(callback: Callback<string>)

进行剪切操作时，触发该回调。

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

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

参数：

展开
参数名 类型 必填 说明
callback Callback<string> 是 剪切回调，其返回值为剪切的文本内容。

onWillCutBeta

PhonePC/2in1TabletTVWearable

onWillCut(callback: Callback<string, boolean>)

在进行剪切操作前，触发该回调。

起始版本： 26.0.0

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<string, boolean> 是 剪切操作前的回调。回调参数类型为string时，表示将要被剪切的文本内容。回调参数类型为boolean时，表示当前选中文本是否允许被剪切，true：允许文本被剪切；false：不允许文本被剪切。

onPaste8+

PhonePC/2in1TabletTVWearable

onPaste(callback: OnPasteCallback)

进行粘贴操作时，触发该回调。

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

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

参数：

展开
参数名 类型 必填 说明
callback OnPasteCallback 是 粘贴回调。

onTextSelectionChange10+

PhonePC/2in1TabletTVWearable

onTextSelectionChange(callback: OnTextSelectionChangeCallback)

文本选择的位置或编辑状态下光标位置发生变化时，触发该回调。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback OnTextSelectionChangeCallback 是 文本选择变化回调或光标位置变化回调。

onContentScroll10+

PhonePC/2in1TabletTVWearable

onContentScroll(callback: OnContentScrollCallback)

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback OnContentScrollCallback 是 文本内容滚动回调。

onSecurityStateChange12+

PhonePC/2in1TabletTVWearable

onSecurityStateChange(callback: Callback<boolean>)

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

说明

从API version 20开始，该接口支持在attributeModifier中调用。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<boolean> 是

回调函数。

true表示密码显示；false表示密码隐藏。

onWillInsert12+

PhonePC/2in1TabletTVWearable

onWillInsert(callback: Callback<InsertValue, boolean>)

在将要输入时，触发该回调。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<InsertValue, boolean> 是

在将要输入时调用的回调。

在返回true时，表示正常插入，返回false时，表示不插入。

在预上屏和候选词操作时，该回调不触发。

仅支持系统输入法输入的场景。

onDidInsert12+

PhonePC/2in1TabletTVWearable

onDidInsert(callback: Callback<InsertValue>)

在输入完成时，触发该回调。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<InsertValue> 是

在输入完成时调用的回调。

仅支持系统输入法输入的场景。

onWillDelete12+

PhonePC/2in1TabletTVWearable

onWillDelete(callback: Callback<DeleteValue, boolean>)

在将要删除时，触发该回调。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<DeleteValue, boolean> 是

在将要删除时调用的回调。

在返回true时，表示正常删除，返回false时，表示不删除。

在预上屏删除操作时，该回调不触发。

仅支持系统输入法输入的场景。

onDidDelete12+

PhonePC/2in1TabletTVWearable

onDidDelete(callback: Callback<DeleteValue>)

在删除完成时，触发该回调。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<DeleteValue> 是

在删除完成时调用的回调。

仅支持系统输入法输入的场景。
说明

点击清除按钮不触发onDidDelete回调。

onWillChange15+

PhonePC/2in1TabletTVWearable

onWillChange(callback: Callback<EditableTextChangeValue, boolean>)

在文本内容将要发生变化时，触发该回调。

onWillChange的回调时序晚于onWillInsert、onWillDelete，早于onDidInsert、onDidDelete。

元服务API： 从API version 15开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<EditableTextChangeValue, boolean> 是

在文本内容将要发生变化时的回调。

返回true时，表示正常修改。返回false时，表示拦截此次触发。

onWillAttachIME20+

PhonePC/2in1TabletTVWearable

onWillAttachIME(callback: Callback<IMEClient>)

在输入框将要绑定输入法前触发该回调。

从API version 22开始，调用IMEClient的setExtraConfig方法可以设置输入法扩展信息。在绑定输入法成功后，输入法会收到扩展信息，输入法可以依据此信息实现自定义功能。

IMEClient仅在onWillAttachIME执行期间有效，不可进行异步调用。

说明

该接口不支持在attributeModifier中调用。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
callback Callback<IMEClient> 是 在输入框将要绑定输入法前触发该回调。

TextInputController8+

PhonePC/2in1TabletTVWearable

TextInput组件的控制器继承自TextContentControllerBase，涉及的接口有getTextContentRect、getTextContentLineCount、getCaretOffset、addText、deleteText、getSelection、clearPreviewText、setStyledPlaceholder、deleteBackward、scrollToVisible。

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

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

导入对象

收起
自动换行
深色代码主题
复制
  1. controller: TextInputController = new TextInputController();

constructor8+

PhonePC/2in1TabletTVWearable

constructor()

TextInputController的构造函数。

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

模型约束： 此接口仅可在Stage模型下使用。

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

caretPosition8+

PhonePC/2in1TabletTVWearable

caretPosition(value: number): void

设置输入光标的位置。当取值小于0时，取0，大于文本长度时，显示在文本末尾。

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
value number 是 从字符串开始到光标所在位置的字符长度。

setTextSelection10+

PhonePC/2in1TabletTVWearable

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

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

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

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
selectionStart number 是 文本选择区域起始位置，文本框中文字的起始位置为0。
selectionEnd number 是 文本选择区域结束位置。当selectionEnd<0时，按照0处理；当selectionEnd大于文本长度时，按照文本长度处理。
options12+ SelectionOptions 否

选中文字时的配置。

默认值：MenuPolicy.DEFAULT

从API version 12开始，该接口中的options参数支持在元服务中使用。
说明

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

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

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

stopEditing10+

PhonePC/2in1TabletTVWearable

stopEditing(): void

退出编辑态。

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

模型约束： 此接口仅可在Stage模型下使用。

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

UnderlineColor12+对象说明

PhonePC/2in1TabletTVWearable

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

模型约束： 此接口仅可在Stage模型下使用。

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

展开
名称 类型 只读 可选 说明
typing ResourceColor | undefined 否 是 键入时下划线颜色。不填写、undefined、null、无效值时恢复默认。
normal ResourceColor | undefined 否 是 非特殊状态时下划线颜色。不填写、undefined、null、无效值时恢复默认。
error ResourceColor | undefined 否 是 错误时下划线颜色。不填写、undefined、null、无效值时恢复默认。此选项会修改showCounter属性中达到最大字符数时的颜色。
disable ResourceColor | undefined 否 是 禁用时下划线颜色。不填写、undefined、null、无效值时恢复默认。

SubmitEvent11+

PhonePC/2in1TabletTVWearable

定义用户提交事件。

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

模型约束： 此接口仅可在Stage模型下使用。

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

属性

PhonePC/2in1TabletTVWearable

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

模型约束： 此接口仅可在Stage模型下使用。

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

展开
名称 类型 只读 可选 说明
text string 否 否 输入框文本内容。

keepEditableState11+

PhonePC/2in1TabletTVWearable

keepEditableState(): void

用户自定义输入框编辑状态，调用时保持编辑态。

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

模型约束： 此接口仅可在Stage模型下使用。

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

OnPasteCallback18+

PhonePC/2in1TabletTVWearable

type OnPasteCallback = (content: string, event: PasteEvent) => void

粘贴回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
content string 是 粘贴的文本内容。
event PasteEvent 是 用户自定义的粘贴事件。

OnSubmitCallback18+

PhonePC/2in1TabletTVWearable

type OnSubmitCallback = (enterKey: EnterKeyType, event: SubmitEvent) => void

提交回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
enterKey EnterKeyType 是 输入法回车键类型。
event SubmitEvent 是 提交事件。可以控制是否收起键盘。

OnTextSelectionChangeCallback18+

PhonePC/2in1TabletTVWearable

type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void

文本选择变化回调或光标位置变化回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

展开
参数名 类型 必填 说明
selectionStart number 是 所选文本的起始位置，文字的起始位置为0。
selectionEnd number 是 所选文本的结束位置。

OnContentScrollCallback18+

PhonePC/2in1TabletTVWearable

type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void

文本内容滚动回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

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

参数：

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

示例

PhonePC/2in1TabletTVWearable

示例1（设置与获取光标位置）

从API version 8开始，该示例通过controller实现了光标位置的设置与获取的功能，同时，可以使用!!实现text参数的双向数据绑定（从API version 18开始）。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = '';
  6.   // index：光标所在位置的索引值
  7.   // x：光标相对输入框的x坐标位值，单位px
  8.   // y：光标相对输入框的y坐标位值，单位px
  9.   @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 };
  10.   @State passwordState: boolean = false;
  11.   controller: TextInputController = new TextInputController();
  12. 

  13.   build() {
  14.     Column() {
  15.       TextInput({ text: this.text!!, placeholder: 'input your word...', controller: this.controller })
  16.         .placeholderColor(Color.Grey)
  17.         .placeholderFont({ size: 14, weight: 400 })
  18.         .caretColor(Color.Blue)
  19.         .width('95%')
  20.         .height(40)
  21.         .margin(20)
  22.         .fontSize(14)
  23.         .fontColor(Color.Black)
  24.         .inputFilter('[a-z]', (e) => {
  25.           console.info(JSON.stringify(e));
  26.         })
  27.       Text(this.text)
  28.       Button('Set caretPosition 1')
  29.         .margin(15)
  30.         .onClick(() => {
  31.           // 将光标移动至第一个字符后
  32.           this.controller.caretPosition(1);
  33.         })
  34.       Button('Get CaretOffset')
  35.         .margin(15)
  36.         .onClick(() => {
  37.           // 获取光标相对输入框的位置
  38.           this.positionInfo = this.controller.getCaretOffset();
  39.         })
  40.       // 密码输入框
  41.       TextInput({ placeholder: 'input your password...' })
  42.         .width('95%')
  43.         .height(40)
  44.         .margin(20)
  45.         .type(InputType.Password)
  46.         .maxLength(9)
  47.         .showPasswordIcon(true)
  48.         .showPassword(this.passwordState)
  49.         .onSecurityStateChange(((isShowPassword: boolean) => {
  50.           // 更新密码显示状态
  51.           console.info('isShowPassword', isShowPassword);
  52.           this.passwordState = isShowPassword;
  53.         }))
  54.       // 邮箱地址自动填充类型
  55.       TextInput({ placeholder: 'input your email...' })
  56.         .width('95%')
  57.         .height(40)
  58.         .margin(20)
  59.         .contentType(ContentType.EMAIL_ADDRESS)
  60.         .maxLength(9)
  61.       // 内联风格输入框
  62.       TextInput({ text: 'inline style' })
  63.         .width('95%')
  64.         .height(50)
  65.         .margin(20)
  66.         .borderRadius(0)
  67.         .style(TextInputStyle.Inline)
  68.     }.width('100%')
  69.   }
  70. }

示例2（设置下划线）

从API version 10开始支持，该示例通过showUnderline、showError、showUnit、passwordIcon属性展示了下划线在不同场景的效果，同时，可以通过underlineColor（从API version 12开始）支持配置下划线颜色。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   // $r('app.media.ImageOne')需要替换为开发者所需的图像资源文件。
  6.   @State passWordSrc1: Resource = $r('app.media.ImageOne');
  7.   // $r('app.media.ImageTwo')需要替换为开发者所需的图像资源文件。
  8.   @State passWordSrc2: Resource = $r('app.media.ImageTwo');
  9.   @State textError: string = '';
  10.   @State text: string = '';
  11.   @State nameText: string = 'test';
  12. 

  13.   @Builder
  14.   itemEnd() {
  15.     Select([{ value: 'KB' },
  16.       { value: 'MB' },
  17.       { value: 'GB' },
  18.       { value: 'TB', }])
  19.       .height("48vp")
  20.       .borderRadius(0)
  21.       .selected(2)
  22.       .align(Alignment.Center)
  23.       .value('MB')
  24.       .font({ size: 20, weight: 500 })
  25.       .fontColor('#182431')
  26.       .selectedOptionFont({ size: 20, weight: 400 })
  27.       .optionFont({ size: 20, weight: 400 })
  28.       .backgroundColor(Color.Transparent)
  29.       .responseRegion({
  30.         height: "40vp",
  31.         width: "80%",
  32.         x: '10%',
  33.         y: '6vp'
  34.       })
  35.       .onSelect((index: number) => {
  36.         console.info('Select:' + index);
  37.       })
  38.   }
  39. 

  40.   build() {
  41.     Column({ space: 20 }) {
  42.       // 自定义密码显示图标
  43.       TextInput({ placeholder: 'user define password icon' })
  44.         .type(InputType.Password)
  45.         .width(350)
  46.         .height(60)
  47.         .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 })
  48.       // 下划线模式
  49.       TextInput({ placeholder: 'underline style' })
  50.         .showUnderline(true)
  51.         .width(350)
  52.         .height(60)
  53.         .showError('Error')
  54.         .showUnit(this.itemEnd)
  55. 

  56.       Text(`用户名：${this.text}`)
  57.         .width(350)
  58.       TextInput({ placeholder: '请输入用户名', text: this.text })
  59.         .showUnderline(true)
  60.         .width(350)
  61.         .showError(this.textError)
  62.         .onChange((value: string) => {
  63.           this.text = value;
  64.         })
  65.         .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
  66.           // 用户名不正确会清空输入框和用户名并提示错误文本
  67.           if (this.text == this.nameText) {
  68.             this.textError = '';
  69.           } else {
  70.             this.textError = '用户名输入错误';
  71.             this.text = '';
  72.             // 调用keepEditableState方法，输入框保持编辑态
  73.             event.keepEditableState();
  74.           }
  75.         })
  76.       // 设置下划线颜色
  77.       TextInput({ placeholder: '提示文本内容' })
  78.         .width(350)
  79.         .showUnderline(true)
  80.         .underlineColor({
  81.           normal: Color.Orange,
  82.           typing: Color.Green,
  83.           error: Color.Red,
  84.           disable: Color.Gray
  85.         })
  86.       TextInput({ placeholder: '提示文本内容' })
  87.         .width(350)
  88.         .showUnderline(true)
  89.         .underlineColor(Color.Gray);
  90. 

  91.     }.width('100%').margin({ top: 10 })
  92.   }
  93. }

示例3（设置自定义键盘）

该示例通过customKeyboard（从API version 10开始）属性分别将value中的入参类型设置为CustomBuilder和ComponentContent，实现了自定义键盘的功能。

从API version 22开始customKeyboard属性新增了入参类型ComponentContent。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { ComponentContent } from '@kit.ArkUI';
  3. class BuilderParams {
  4.   inputValue: string;
  5.   controller: TextInputController;
  6. 

  7.   constructor(inputValue: string, controller: TextInputController) {
  8.     this.inputValue = inputValue;
  9.     this.controller = controller;
  10.   }
  11. }
  12. @Builder
  13. function CustomKeyboardBuilder(builderParams: BuilderParams) {
  14.   Column() {
  15.     Row() {
  16.       Button('x').onClick(() => {
  17.         // 关闭自定义键盘
  18.         builderParams.controller.stopEditing();
  19.       }).margin(10)
  20.     }
  21. 

  22.     Grid() {
  23.       ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
  24.         GridItem() {
  25.           Button(item + "")
  26.             .width(110).onClick(() => {
  27.             builderParams.inputValue += item;
  28.           })
  29.         }
  30.       })
  31.     }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
  32.   }.backgroundColor(Color.Gray)
  33. }
  34. @Entry
  35. @Component
  36. struct TextInputExample {
  37.   controller: TextInputController = new TextInputController();
  38.   @State inputValue: string = "";
  39.   @State componentContent?: ComponentContent<BuilderParams> = undefined;
  40.   @State builderParam: BuilderParams = new BuilderParams(this.inputValue, this.controller);
  41.   @State supportAvoidance: boolean = true;
  42. 

  43.   aboutToAppear(): void {
  44.     // 创建ComponentContent
  45.     this.componentContent = new ComponentContent(this.getUIContext(), wrapBuilder(CustomKeyboardBuilder), this.builderParam);
  46.   }
  47.   build(){
  48.     Column() {
  49.       Text('Builder').margin(10).border({ width: 1 })
  50.       TextInput({ controller: this.builderParam.controller, text: this.builderParam.inputValue })
  51.         .customKeyboard(this.componentContent, { supportAvoidance: this.supportAvoidance })
  52.         .margin(10).border({ width: 1 }).height('48vp')
  53. 

  54.       Text('ComponentContent').margin(10).border({ width: 1 })
  55.       TextInput({ controller: this.builderParam.controller, text: this.builderParam.inputValue })
  56.         .customKeyboard(CustomKeyboardBuilder(this.builderParam), { supportAvoidance: this.supportAvoidance })
  57.         .margin(10).border({ width: 1 }).height('48vp')
  58.     }
  59.   }
  60. }

示例4（设置右侧清除按钮样式）

该示例通过cancelButton属性展示了自定义右侧清除按钮样式的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = '';
  6.   controller: TextInputController = new TextInputController();
  7. 

  8.   build() {
  9.     Column() {
  10.       TextInput({ placeholder: 'input ...', controller: this.controller })
  11.         .width(380)
  12.         .height(60)
  13.         .cancelButton({
  14.           style: CancelButtonStyle.CONSTANT,
  15.           icon: {
  16.             size: 45,
  17.             // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
  18.             src: $r('app.media.startIcon'),
  19.             color: Color.Blue
  20.           }
  21.         })
  22.         .onChange((value: string) => {
  23.           this.text = value;
  24.         })
  25.     }
  26.   }
  27. }

示例5（设置计数器）

该示例通过maxLength、showCounter（从API version 11开始）、showUnderline（从API version 10开始）属性实现了计数器的功能。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = '';
  6.   controller: TextInputController = new TextInputController();
  7. 

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

示例6（电话号码格式化）

该示例通过onChange回调实现了电话号码格式化为XXX XXXX XXXX的功能。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State submitValue: string = '';
  6.   @State text: string = '';
  7.   public readonly NUM_TEXT_MAXSIZE_LENGTH = 13;
  8.   @State telNumberNoSpace: string = "";
  9.   @State nextCaret: number = -1; // 用于记录下次光标设置的位置
  10.   @State actualCh: number = -1; // 用于记录光标在第i个数字后插入或者第i个数字前删除
  11.   @State lastCaretPosition: number = 0;
  12.   @State lastCaretPositionEnd: number = 0;
  13.   controller: TextInputController = new TextInputController();
  14. 

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

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

  23.     if (isSpace.test(numText)) {
  24.       // 如果电话号码里有特殊字符，就不加空格
  25.       if (isRule.test(numText)) {
  26.         return true;
  27.       } else {
  28.         return false;
  29.       }
  30.     }
  31.     return true;
  32.   }
  33. 

  34.   removeSpace(str: string): string {
  35.     if (this.isEmpty(str)) {
  36.       return '';
  37.     }
  38.     return str.replace(new RegExp("[\\s]", "g"), '');
  39.   }
  40. 

  41.   setCaret() {
  42.     if (this.nextCaret != -1) {
  43.       console.info("to keep caret position right, change caret to", this.nextCaret);
  44.       this.controller.caretPosition(this.nextCaret);
  45.       this.nextCaret = -1;
  46.     }
  47.   }
  48. 

  49.   calcCaretPosition(nextText: string) {
  50.     let befNumberNoSpace: string = this.removeSpace(this.text);
  51.     this.actualCh = 0;
  52.     if (befNumberNoSpace.length < this.telNumberNoSpace.length) { // 插入场景
  53.       for (let i = 0; i < this.lastCaretPosition; i++) {
  54.         if (this.text[i] != ' ') {
  55.           this.actualCh += 1;
  56.         }
  57.       }
  58.       this.actualCh += this.telNumberNoSpace.length - befNumberNoSpace.length;
  59.       console.info("actualCh: " + this.actualCh);
  60.       for (let i = 0; i < nextText.length; i++) {
  61.         if (nextText[i] != ' ') {
  62.           this.actualCh -= 1;
  63.           if (this.actualCh <= 0) {
  64.             this.nextCaret = i + 1;
  65.             break;
  66.           }
  67.         }
  68.       }
  69.     } else if (befNumberNoSpace.length > this.telNumberNoSpace.length) { // 删除场景
  70.       if (this.lastCaretPosition === this.text.length) {
  71.         console.info("Caret at last, no need to change");
  72.       } else if (this.lastCaretPosition === this.lastCaretPositionEnd) {
  73.         // 按键盘上回退键一个一个删的情况
  74.         for (let i = this.lastCaretPosition; i < this.text.length; i++) {
  75.           if (this.text[i] != ' ') {
  76.             this.actualCh += 1;
  77.           }
  78.         }
  79.         for (let i = nextText.length - 1; i >= 0; i--) {
  80.           if (nextText[i] != ' ') {
  81.             this.actualCh -= 1;
  82.             if (this.actualCh <= 0) {
  83.               this.nextCaret = i;
  84.               break;
  85.             }
  86.           }
  87.         }
  88.       } else {
  89.         // 剪切/手柄选择 一次删多个字符
  90.         this.nextCaret = this.lastCaretPosition; // 保持光标位置
  91.       }
  92.     }
  93.   }
  94. 

  95.   build() {
  96.     Column() {
  97.       Row() {
  98.         TextInput({ text: `${this.text}`, controller: this.controller }).type(InputType.PhoneNumber).height('48vp')
  99.           .onChange((value: string) => {
  100.             this.telNumberNoSpace = this.removeSpace(value);
  101.             let nextText: string = "";
  102.             if (this.telNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) {
  103.               nextText = this.telNumberNoSpace;
  104.             } else if (this.checkNeedNumberSpace(value)) {
  105.               if (this.telNumberNoSpace.length <= 3) {
  106.                 nextText = this.telNumberNoSpace;
  107.               } else {
  108.                 let split1: string = this.telNumberNoSpace.substring(0, 3);
  109.                 let split2: string = this.telNumberNoSpace.substring(3);
  110.                 nextText = split1 + ' ' + split2;
  111.                 if (this.telNumberNoSpace.length > 7) {
  112.                   split2 = this.telNumberNoSpace.substring(3, 7);
  113.                   let split3: string = this.telNumberNoSpace.substring(7);
  114.                   nextText = split1 + ' ' + split2 + ' ' + split3;
  115.                 }
  116.               }
  117.             } else {
  118.               nextText = value;
  119.             }
  120.             console.info("onChange Triggered:" + this.text + "|" + nextText + "|" + value);
  121.             if (this.text === nextText && nextText === value) {
  122.               // 此时说明数字已经格式化完成了 在这个时候改变光标位置不会被重置掉
  123.               this.setCaret();
  124.             } else {
  125.               this.calcCaretPosition(nextText);
  126.             }
  127.             this.text = nextText;
  128.           })
  129.           .onTextSelectionChange((selectionStart, selectionEnd) => {
  130.             // 记录光标位置
  131.             console.info("selection change: ", selectionStart, selectionEnd);
  132.             this.lastCaretPosition = selectionStart;
  133.             this.lastCaretPositionEnd = selectionEnd;
  134.           })// 从API version 10开始支持
  135.       }
  136.     }
  137.     .width('100%')
  138.     .height("100%")
  139.   }
  140. }

示例7（设置文本断行规则）

从API version 12开始，该示例通过wordBreak属性实现了TextInput不同断行规则下的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State textStrEn: string =
  6.     'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.';
  7.   @State textStrZn: string =
  8.     '多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。';
  9. 

  10.   build() {
  11.     Row() {
  12.       Column() {
  13.         Text("TextInput为inline模式，WordBreakType属性为NORMAL的样式：").fontSize(16).fontColor(0xCCCCCC)
  14.         TextInput({
  15.           text: this.textStrEn
  16.         })
  17.           .margin(10)
  18.           .fontSize(16)
  19.           .style(TextInputStyle.Inline)// Inline模式
  20.           .wordBreak(WordBreak.NORMAL) // 非Inline模式该属性无效
  21. 

  22.         Text("TextInput为inline模式，英文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xCCCCCC)
  23.         TextInput({
  24.           text: this.textStrEn
  25.         })
  26.           .margin(10)
  27.           .fontSize(16)
  28.           .style(TextInputStyle.Inline)
  29.           .wordBreak(WordBreak.BREAK_ALL)
  30. 

  31.         Text("TextInput为inline模式，中文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xCCCCCC)
  32.         TextInput({
  33.           text: this.textStrZn
  34.         })
  35.           .margin(10)
  36.           .fontSize(16)
  37.           .style(TextInputStyle.Inline)
  38.           .wordBreak(WordBreak.BREAK_ALL)
  39. 

  40.         Text("TextInput为inline模式，WordBreakType属性为BREAK_WORD的样式：").fontSize(16).fontColor(0xCCCCCC)
  41.         TextInput({
  42.           text: this.textStrEn
  43.         })
  44.           .margin(10)
  45.           .fontSize(16)
  46.           .style(TextInputStyle.Inline)
  47.           .wordBreak(WordBreak.BREAK_WORD)
  48.       }.width('100%')
  49.     }.height('100%').margin(10)
  50.   }
  51. }

示例8（设置文本样式）

从API version 12开始，该示例通过lineHeight、letterSpacing、decoration属性展示了不同样式的文本效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   build() {
  6.     Row() {
  7.       Column() {
  8.         Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
  9.         TextInput({ text: 'lineHeight unset' })
  10.           .border({ width: 1 }).padding(10).margin(5)
  11.         TextInput({ text: 'lineHeight 15' })
  12.           .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
  13.         TextInput({ text: 'lineHeight 30' })
  14.           .border({ width: 1 }).padding(10).margin(5).lineHeight(30)
  15. 

  16.         Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
  17.         TextInput({ text: 'letterSpacing 0' })
  18.           .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
  19.         TextInput({ text: 'letterSpacing 3' })
  20.           .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
  21.         TextInput({ text: 'letterSpacing -1' })
  22.           .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)
  23. 

  24.         Text('decoration').fontSize(9).fontColor(0xCCCCCC)
  25.         TextInput({ text: 'LineThrough, Red' })
  26.           .border({ width: 1 }).padding(5).margin(5)
  27.           .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
  28.         TextInput({ text: 'Overline, Red, DASHED' })
  29.           .border({ width: 1 }).padding(5).margin(5)
  30.           .decoration({ type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED })
  31.         TextInput({ text: 'Underline, Red, WAVY' })
  32.           .border({ width: 1 }).padding(5).margin(5)
  33.           .decoration({ type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY })
  34.       }.height('90%')
  35.     }
  36.     .width('90%')
  37.     .margin(10)
  38.   }
  39. }

示例9（设置文字特性效果）

从API version 12开始，该示例通过fontFeature属性实现了文本在不同文字特性下的展示效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text1: string = 'This is ss01 on : 0123456789';
  6.   @State text2: string = 'This is ss01 off: 0123456789';
  7. 

  8.   build() {
  9.     Column() {
  10.       TextInput({ text: this.text1 })
  11.         .fontSize(20)
  12.         .margin({ top: 200 })
  13.         .fontFeature("\"ss01\" on")
  14.       TextInput({ text: this.text2 })
  15.         .margin({ top: 10 })
  16.         .fontSize(20)
  17.         .fontFeature("\"ss01\" off")
  18.     }
  19.     .width("90%")
  20.     .margin("5%")
  21.   }
  22. }

示例10（自定义键盘避让）

该示例通过customKeyboard（从API version 10开始）属性配置KeyboardOptions（从API version 12开始）接口实现了自定义键盘避让的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   controller: TextInputController = new TextInputController();
  6.   @State inputValue: string = "";
  7.   @State height1: string | number = '80%';
  8.   @State supportAvoidance: boolean = true;
  9. 

  10.   // 自定义键盘组件
  11.   @Builder
  12.   CustomKeyboardBuilder() {
  13.     Column() {
  14.       Row() {
  15.         Button('x').onClick(() => {
  16.           // 关闭自定义键盘
  17.           this.controller.stopEditing();
  18.         }).margin(10)
  19.       }
  20. 

  21.       Grid() {
  22.         ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
  23.           GridItem() {
  24.             Button(item + "")
  25.               .width(110).onClick(() => {
  26.               this.inputValue += item;
  27.             })
  28.           }
  29.         })
  30.       }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
  31.     }.backgroundColor(Color.Gray)
  32.   }
  33. 

  34.   build() {
  35.     Column() {
  36.       Row() {
  37.         Button("20%")
  38.           .fontSize(24)
  39.           .onClick(() => {
  40.             this.height1 = "20%";
  41.           })
  42.         Button("80%")
  43.           .fontSize(24)
  44.           .margin({ left: 20 })
  45.           .onClick(() => {
  46.             this.height1 = "80%";
  47.           })
  48.       }
  49.       .justifyContent(FlexAlign.Center)
  50.       .alignItems(VerticalAlign.Bottom)
  51.       .height(this.height1)
  52.       .width("100%")
  53.       .padding({ bottom: 50 })
  54. 

  55.       TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘
  56.         .customKeyboard(this.CustomKeyboardBuilder(), { supportAvoidance: this.supportAvoidance })
  57.         .margin(10)
  58.         .border({ width: 1 })
  59. 

  60.     }
  61.   }
  62. }

示例11（设置文本自适应）

从API version 12开始，该示例通过minFontSize、maxFontSize、heightAdaptivePolicy属性实现了文本自适应字号的功能。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   build() {
  6.     Row() {
  7.       Column() {
  8.         Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
  9.         TextInput({ text: 'This is the text without the height adaptive policy set' })
  10.           .width('80%').height(50).borderWidth(1).margin(1)
  11.         TextInput({ text: 'This is the text with the height adaptive policy set' })
  12.           .width('80%')
  13.           .height(50)
  14.           .borderWidth(1)
  15.           .margin(1)
  16.           .minFontSize(4)
  17.           .maxFontSize(40)
  18.           .maxLines(3)
  19.           .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
  20.         TextInput({ text: 'This is the text with the height adaptive policy set' })
  21.           .width('80%')
  22.           .height(50)
  23.           .borderWidth(1)
  24.           .margin(1)
  25.           .minFontSize(4)
  26.           .maxFontSize(40)
  27.           .maxLines(3)
  28.           .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
  29.         TextInput({ text: 'This is the text with the height adaptive policy set' })
  30.           .width('80%')
  31.           .height(50)
  32.           .borderWidth(1)
  33.           .margin(1)
  34.           .minFontSize(4)
  35.           .maxFontSize(40)
  36.           .maxLines(3)
  37.           .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
  38.       }.height('90%')
  39.     }
  40.     .width('90%')
  41.     .margin(10)
  42.   }
  43. }

示例12（设置折行规则）

从API version 12开始，该示例通过lineBreakStrategy属性实现了TextInput不同折行规则下的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State message1: string =
  6.     "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
  7.       "The built-in components include buttons radio progress indicators and text You can set the rendering effect of these components in method chaining mode," +
  8.       "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented.";
  9.   @State lineBreakStrategyIndex: number = 0;
  10.   @State lineBreakStrategy: LineBreakStrategy[] =
  11.     [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED];
  12.   @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED'];
  13. 

  14.   build() {
  15.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  16.       Text('lineBreakStrategy').fontSize(16).fontColor(Color.Black)
  17.       TextInput({ text: this.message1 })
  18.         .fontSize(12)
  19.         .border({ width: 1 })
  20.         .padding(10)
  21.         .width('100%')
  22.         .maxLines(12)
  23.         .style(TextInputStyle.Inline)
  24.         .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex])
  25.       Row() {
  26.         Button('当前lineBreakStrategy模式：' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => {
  27.           this.lineBreakStrategyIndex++;
  28.           if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) {
  29.             this.lineBreakStrategyIndex = 0;
  30.           }
  31.         })
  32.       }.margin({ top: 20 })
  33.     }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
  34.   }
  35. }

示例13（支持插入和删除回调）

从API version 12开始，该示例通过onWillInsert、onDidInsert、onWillDelete、onDidDelete接口实现了插入和删除的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State insertValue: string = "";
  6.   @State deleteValue: string = "";
  7.   @State insertOffset: number = 0;
  8.   @State deleteOffset: number = 0;
  9.   @State deleteDirection: number = 0;
  10.   @State currentValue_1: string = "";
  11.   @State currentValue_2: string = "";
  12. 

  13.   build() {
  14.     Row() {
  15.       Column() {
  16.         TextInput({ text: "TextInput支持插入回调文本" })
  17.           .height(60)
  18.           .onWillInsert((info: InsertValue) => {
  19.             this.insertValue = info.insertValue;
  20.             return true;
  21.           })
  22.           .onDidInsert((info: InsertValue) => {
  23.             this.insertOffset = info.insertOffset;
  24.           })
  25.           .onWillChange((info: EditableTextChangeValue) => {
  26.             this.currentValue_1 = info.content
  27.             return true
  28.           })
  29. 

  30.         Text("insertValue:" + this.insertValue + "  insertOffset:" + this.insertOffset).height(30)
  31.         Text("currentValue_1:" + this.currentValue_1).height(30)
  32. 

  33.         TextInput({ text: "TextInput支持删除回调文本b" })
  34.           .height(60)
  35.           .onWillDelete((info: DeleteValue) => {
  36.             this.deleteValue = info.deleteValue;
  37.             this.deleteDirection = info.direction;
  38.             return true;
  39.           })
  40.           .onDidDelete((info: DeleteValue) => {
  41.             this.deleteOffset = info.deleteOffset;
  42.             this.deleteDirection = info.direction;
  43.           })
  44.           .onWillChange((info: EditableTextChangeValue) => {
  45.             this.currentValue_2 = info.content
  46.             return true
  47.           })
  48. 

  49.         Text("deleteValue:" + this.deleteValue + "  deleteOffset:" + this.deleteOffset).height(30)
  50.         Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30)
  51.         Text("currentValue_2:" + this.currentValue_2).height(30)
  52. 

  53.       }.width('100%')
  54.     }
  55.     .height('100%')
  56.   }
  57. }

示例14（文本扩展自定义菜单）

从API version 12开始，该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能，同时，可以在onPrepareMenu（从API version 20开始）回调中，进行菜单数据的设置。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = 'TextInput editMenuOptions';
  6.   @State endIndex: number = 0;
  7.   onCreateMenu = (menuItems: Array<TextMenuItem>) => {
  8.     // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
  9.     // 从API version 23开始支持TextMenuItemId.autoFill
  10.     const idsToFilter: TextMenuItemId[] = [
  11.       TextMenuItemId.autoFill
  12.     ]
  13.     const items = menuItems.filter(item => !idsToFilter.some(id => id.equals(item.id)))
  14.     let item1: TextMenuItem = {
  15.       content: 'create1',
  16.       icon: $r('app.media.startIcon'),
  17.       id: TextMenuItemId.of('create1'),
  18.     };
  19.     let item2: TextMenuItem = {
  20.       content: 'create2',
  21.       id: TextMenuItemId.of('create2'),
  22.       icon: $r('app.media.startIcon'),
  23.     };
  24.     items.push(item1);
  25.     items.unshift(item2);
  26.     return items;
  27.   }
  28.   onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => {
  29.     if (menuItem.id.equals(TextMenuItemId.of("create2"))) {
  30.       console.info("拦截 id: create2 start:" + textRange.start + "; end:" + textRange.end);
  31.       return true;
  32.     }
  33.     if (menuItem.id.equals(TextMenuItemId.of("prepare1"))) {
  34.       console.info("拦截 id: prepare1 start:" + textRange.start + "; end:" + textRange.end);
  35.       return true;
  36.     }
  37.     if (menuItem.id.equals(TextMenuItemId.COPY)) {
  38.       console.info("拦截 COPY start:" + textRange.start + "; end:" + textRange.end);
  39.       return true;
  40.     }
  41.     if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) {
  42.       console.info("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end);
  43.       return false;
  44.     }
  45.     return false;
  46.   }
  47.   // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
  48.   onPrepareMenu = (menuItems: Array<TextMenuItem>) => {
  49.     let item1: TextMenuItem = {
  50.       content: 'prepare1_' + this.endIndex,
  51.       icon: $r('app.media.startIcon'),
  52.       id: TextMenuItemId.of('prepare1'),
  53.     };
  54.     menuItems.unshift(item1);
  55.     return menuItems;
  56.   }
  57.   @State editMenuOptions: EditMenuOptions = {
  58.     onCreateMenu: this.onCreateMenu,
  59.     onMenuItemClick: this.onMenuItemClick,
  60.     onPrepareMenu: this.onPrepareMenu
  61.   };
  62. 

  63.   build() {
  64.     Column() {
  65.       TextInput({ text: this.text })
  66.         .width('95%')
  67.         .height(50)
  68.         .editMenuOptions(this.editMenuOptions)
  69.         .margin({ top: 100 })
  70.         .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
  71.           this.endIndex = selectionEnd;
  72.         })
  73.     }
  74.     .width("90%")
  75.     .margin("5%")
  76.   }
  77. }

示例15（设置symbol类型清除按钮）

从API version 18开始，该示例通过cancelButton属性展示了自定义右侧symbol类型清除按钮样式的效果。

收起
自动换行
深色代码主题
复制
  1. import { SymbolGlyphModifier } from '@kit.ArkUI';
  2. 

  3. // xxx.ets
  4. @Entry
  5. @Component
  6. struct TextInputExample {
  7.   @State text: string = '';
  8.   symbolModifier: SymbolGlyphModifier =
  9.     new SymbolGlyphModifier($r('sys.symbol.trash')).fontColor([Color.Red]).fontSize(16).fontWeight(FontWeight.Regular);
  10. 

  11.   build() {
  12.     Column() {
  13.       TextInput({ text: this.text, placeholder: 'input your word...' })
  14.         .cancelButton({
  15.           style: CancelButtonStyle.CONSTANT,
  16.           icon: this.symbolModifier
  17.         })
  18.     }
  19.   }
  20. }

示例16（文本设置省略模式）

该示例通过textOverflow、ellipsisMode、style属性展示了文本超长省略以及调整省略位置的效果，通过MULTILINE_START和MULTILINE_CENTER两种类型实现了单行文本和多行文本场景下的省略号在行首和行中的效果。

从API version 9开始，通过style设置输入框的风格。

从API version 12开始，通过textOverflow设置文本超长时的显示方式。

从API version 18开始，通过ellipsisMode设置省略号位置。

从API version 24开始，EllipsisMode新增了MULTILINE_START和MULTILINE_CENTER枚举。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct EllipsisModeExample {
  5.   @State text: string = "As the sun begins to set, casting a warm golden hue across the sky," +
  6.     "the world seems to slow down and breathe a sigh of relief. The sky is painted with hues of orange, " +
  7.     " pink, and lavender, creating a breath taking tapestry that stretches as far as the eye can see." +
  8.     "The air is filled with the sweet scent of blooming flowers, mingling with the earthy aroma of freshly turned soil.";
  9.   @State ellipsisModeIndex: number = 0;
  10.   @State ellipsisMode: (EllipsisMode | undefined | null)[] =
  11.     [EllipsisMode.END, EllipsisMode.START, EllipsisMode.CENTER, EllipsisMode.MULTILINE_START,
  12.       EllipsisMode.MULTILINE_CENTER]; // 从API version 24开始新增MULTILINE_START和MULTILINE_CENTER
  13.   @State ellipsisModeStr: string[] = ['END ', 'START', 'CENTER', 'MULTILINE_START', 'MULTILINE_CENTER'];
  14.   @State textOverflowIndex: number = 0;
  15.   @State textOverflow: TextOverflow[] = [TextOverflow.Ellipsis, TextOverflow.Clip];
  16.   @State textOverflowStr: string[] = ['Ellipsis', 'Clip'];
  17.   @State styleInputIndex: number = 0;
  18.   @State styleInput: TextInputStyle[] = [TextInputStyle.Inline, TextInputStyle.Default];
  19.   @State styleInputStr: string[] = ['Inline', 'Default'];
  20. 

  21.   build() {
  22.     Row() {
  23.       Column({ space: 20 }) {
  24.         TextInput({ text: this.text })
  25.           .textOverflow(this.textOverflow[this.textOverflowIndex])
  26.           .ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex])
  27.           .style(this.styleInput[this.styleInputIndex])
  28.           .fontSize(30)
  29.           .margin(30)
  30.         Button('更改ellipsisMode模式：' + this.ellipsisModeStr[this.ellipsisModeIndex]).onClick(() => {
  31.           this.ellipsisModeIndex++;
  32.           if (this.ellipsisModeIndex > (this.ellipsisModeStr.length - 1)) {
  33.             this.ellipsisModeIndex = 0;
  34.           }
  35.         }).fontSize(20)
  36.         Button('更改textOverflow模式：' + this.textOverflowStr[this.textOverflowIndex]).onClick(() => {
  37.           this.textOverflowIndex++;
  38.           if (this.textOverflowIndex > (this.textOverflowStr.length - 1)) {
  39.             this.textOverflowIndex = 0;
  40.           }
  41.         }).fontSize(20)
  42.         Button('更改Style大小：' + this.styleInputStr[this.styleInputIndex]).onClick(() => {
  43.           this.styleInputIndex++;
  44.           if (this.styleInputIndex > (this.styleInputStr.length - 1)) {
  45.             this.styleInputIndex = 0;
  46.           }
  47.         }).fontSize(20)
  48.       }
  49.     }
  50.   }
  51. }

示例17（输入框支持输入状态变化等回调）

从API version 8开始，该示例通过onEditChange、onCopy、onCut、onPaste、onContentScroll（从API version 10开始）、onWillCopy、onWillCut接口实现了输入框监测输入状态变化、复制、剪切、粘贴、文本内容滚动回调的效果、如何屏蔽系统复制功能，以及如何屏蔽系统剪切功能，同时，可以通过设置selectAll（从API version 11开始）属性，输入框初始状态下是否全选文本。

从API版本26.0.0开始，新增onWillCopy、onWillCut接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State editStatus: boolean = false;
  6.   @State copyValue: string = "";
  7.   @State cutValue: string = "";
  8.   @State pasteValue: string = "";
  9.   @State totalOffsetX: number = 0;
  10.   @State totalOffsetY: number = 0;
  11. 

  12.   build() {
  13.     Row() {
  14.       Column() {
  15.         TextInput({ text: "TextInput支持输入状态变化时回调" })
  16.           .height(60)
  17.           .fontStyle(FontStyle.Italic)
  18.           .fontWeight(FontWeight.Bold)
  19.           .fontFamily("HarmonyOS Sans")
  20.           .copyOption(CopyOptions.LocalDevice)
  21.           .textAlign(TextAlign.Center)
  22.           .selectedBackgroundColor(Color.Blue)
  23.           .caretStyle({ width: '4vp' })
  24.           .caretPosition(10)
  25.           .selectionMenuHidden(true)
  26.           .onEditChange((status: boolean) => {
  27.             this.editStatus = status;
  28.           })
  29.           .defaultFocus(true)// 设置TextInput默认获焦
  30.           .enableKeyboardOnFocus(false)
  31.           .selectAll(false)
  32. 

  33.         Text("editStatus:" + this.editStatus).height(30)
  34. 

  35.         TextInput({ text: "TextInput支持复制操作时回调" })
  36.           .height(60)
  37.           .fontStyle(FontStyle.Italic)
  38.           .fontWeight(FontWeight.Bold)
  39.           .fontFamily("HarmonyOS Sans")
  40.           .copyOption(CopyOptions.LocalDevice)
  41.           .textAlign(TextAlign.Center)
  42.           .selectedBackgroundColor(Color.Blue)
  43.           .caretStyle({ width: '4vp' })
  44.           .onCopy((copyValue: string) => {
  45.             this.copyValue = copyValue;
  46.           })
  47.           // 从API版本26.0.0开始支持onWillCopy
  48.           .onWillCopy((value: string) => {
  49.             console.info(`on will copy ${value}`);
  50.             return false;
  51.           })
  52. 

  53.         Text("copyValue:" + this.copyValue).height(30)
  54. 

  55.         TextInput({ text: "TextInput支持剪切操作时回调" })
  56.           .height(60)
  57.           .fontStyle(FontStyle.Italic)
  58.           .fontWeight(FontWeight.Bold)
  59.           .fontFamily("HarmonyOS Sans")
  60.           .copyOption(CopyOptions.LocalDevice)
  61.           .textAlign(TextAlign.Center)
  62.           .selectedBackgroundColor(Color.Blue)
  63.           .caretStyle({ width: '4vp' })
  64.           .onCut((cutValue: string) => {
  65.             this.cutValue = cutValue;
  66.           })
  67.           // 从API版本26.0.0开始支持onWillCut
  68.           .onWillCut((value: string) => {
  69.             console.info(`on will cut ${value}`);
  70.             return false;
  71.           })
  72. 

  73.         Text("cutValue:" + this.cutValue).height(30)
  74. 

  75.         TextInput({ text: "TextInput支持粘贴操作时回调" })
  76.           .height(60)
  77.           .fontStyle(FontStyle.Italic)
  78.           .fontWeight(FontWeight.Bold)
  79.           .fontFamily("HarmonyOS Sans")
  80.           .copyOption(CopyOptions.LocalDevice)
  81.           .textAlign(TextAlign.Center)
  82.           .selectedBackgroundColor(Color.Blue)
  83.           .caretStyle({ width: '4vp' })
  84.           .onPaste((pasteValue: string) => {
  85.             this.pasteValue = pasteValue;
  86.           })
  87. 

  88.         Text("pasteValue:" + this.pasteValue).height(30)
  89. 

  90.         TextInput({ text: "TextInput支持文本内容滚动时回调: 文本内容宽度超出输入框宽度，滚动文本查看偏移量变化" })
  91.           .height(60)
  92.           .fontStyle(FontStyle.Italic)
  93.           .fontWeight(FontWeight.Bold)
  94.           .fontFamily("HarmonyOS Sans")
  95.           .copyOption(CopyOptions.LocalDevice)
  96.           .textAlign(TextAlign.Center)
  97.           .selectedBackgroundColor(Color.Blue)
  98.           .caretStyle({ width: '4vp' })
  99.           .onContentScroll((totalOffsetX: number, totalOffsetY: number) => {
  100.             this.totalOffsetX = totalOffsetX;
  101.             this.totalOffsetY = totalOffsetY;
  102.           })
  103. 

  104.         Text("totalOffsetX:" + this.totalOffsetX + "  totalOffsetY:" + this.totalOffsetY).height(30)
  105. 

  106.       }.width('100%')
  107.     }
  108.     .height('100%')
  109.   }
  110. }

示例18（设置最小字体范围与最大字体范围）

从API version 18开始，该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围。

收起
自动换行
深色代码主题
复制
  1. // 开启应用缩放跟随系统
  2. // AppScope/resources/base，新建文件夹profile。
  3. // AppScope/resources/base/profile，新建文件configuration.json。
  4. // AppScope/resources/base/profile/configuration.json，增加如下代码。
  5. {
  6.   "configuration": {
  7.     "fontSizeScale": "followSystem",
  8.     "fontSizeMaxScale": "3.2"
  9.   }
  10. }
收起
自动换行
深色代码主题
复制
  1. // AppScope/app.json5，修改如下代码。
  2. {
  3.   "app": {
  4.     "bundleName": "com.example.myapplication",
  5.     "vendor": "example",
  6.     "versionCode": 1000000,
  7.     "versionName": "1.0.0",
  8.     "icon": "$media:app_icon",
  9.     "label": "$string:app_name",
  10.     "configuration": "$profile:configuration"
  11.   }
  12. }
收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State minFontScale: number = 0.85;
  6.   @State maxFontScale: number = 2;
  7. 

  8.   build() {
  9.     Column() {
  10.       Column({ space: 30 }) {
  11.         Text("通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。")
  12.         TextInput({
  13.           placeholder: 'The text area can hold an unlimited amount of text. input your word...',
  14.           text: '通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。'
  15.         })
  16.           .minFontScale(this.minFontScale)// 设置最小字体缩放倍数，参数为undefined则跟随系统默认倍数缩放
  17.           .maxFontScale(this.maxFontScale) // 设置最大字体缩放倍数，参数为undefined则跟随系统默认倍数缩放
  18.       }.width('100%')
  19.     }
  20.   }
  21. }
展开
系统字体缩放倍数为2倍 系统字体缩放倍数为3.2倍

示例19（设置选中指定区域的文本内容）

从API version 10开始，该示例通过setTextSelection方法展示如何设置选中指定区域的文本内容以及菜单的显隐策略。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. 

  3. @Entry
  4. @Component
  5. struct TextInputExample {
  6.   controller: TextInputController = new TextInputController();
  7.   @State startIndex: number = 0;
  8.   @State endIndex: number = 0;
  9. 

  10.   build() {
  11.     Column({ space: 3 }) {
  12.       Text('Selection start:' + this.startIndex + ' end:' + this.endIndex)
  13.       TextInput({ text: 'Hello World', controller: this.controller })
  14.         .width('95%')
  15.         .height(40)
  16.         .defaultFocus(true)
  17.         .enableKeyboardOnFocus(true)
  18.         .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
  19.           this.startIndex = selectionStart;
  20.           this.endIndex = selectionEnd;
  21.         })
  22. 

  23.       Button('setTextSelection [0,3], set menuPolicy is MenuPolicy.SHOW')
  24.         .onClick(() => {
  25.           this.controller.setTextSelection(0, 3, { menuPolicy: MenuPolicy.SHOW });
  26.         })
  27.     }
  28.     .width('100%')
  29.     .height('100%')
  30.   }
  31. }

示例20（设置文本描边）

从API version 20开始，该示例通过strokeWidth和strokeColor属性设置文本的描边宽度及颜色。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { LengthMetrics } from '@kit.ArkUI';
  3. 

  4. @Entry
  5. @Component
  6. struct TextInputExample {
  7.   build() {
  8.     Row() {
  9.       Column() {
  10.         Text('stroke feature').fontSize(9).fontColor(0xCCCCCC)
  11. 

  12.         TextInput({ text: 'Text without stroke' })
  13.           .width('100%')
  14.           .height(60)
  15.           .borderWidth(1)
  16.           .fontSize(40)
  17.         TextInput({ text: 'Text with stroke' })
  18.           .width('100%')
  19.           .height(60)
  20.           .borderWidth(1)
  21.           .fontSize(40)
  22.           .strokeWidth(LengthMetrics.px(-3.0))
  23.           .strokeColor(Color.Red)
  24.         TextInput({ text: 'Text with stroke' })
  25.           .width('100%')
  26.           .height(60)
  27.           .borderWidth(1)
  28.           .fontSize(40)
  29.           .strokeWidth(LengthMetrics.px(3.0))
  30.           .strokeColor(Color.Red)
  31.       }.height('90%')
  32.     }
  33.     .width('90%')
  34.     .margin(10)
  35.   }
  36. }

示例21（设置中西文自动间距）

从API version 20开始，该示例通过enableAutoSpacing属性设置中西文自动间距。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   build() {
  6.     Row() {
  7.       Column() {
  8.         Text('开启中西文自动间距').margin(5)
  9.         TextInput({text: '中西文Auto Spacing自动间距'})
  10.           .enableAutoSpacing(true)
  11.         Text('关闭中西文自动间距').margin(5)
  12.         TextInput({text: '中西文Auto Spacing自动间距'})
  13.           .enableAutoSpacing(false)
  14.       }.height('100%')
  15.     }
  16.     .width('60%')
  17.   }
  18. }

示例22（设置字符计数颜色以及超出字符颜色）

从API version 22开始，该示例通过showCounter属性的counterTextColor和counterTextOverflowColor设置字符计数颜色以及超出字符颜色。

收起
自动换行
深色代码主题
复制
  1. import { ColorMetrics } from '@kit.ArkUI';
  2. 

  3. // xxx.ets
  4. @Entry
  5. @Component
  6. struct TextInputExample {
  7.   @State text: string = '';
  8.   controller: TextInputController = new TextInputController();
  9. 

  10.   build() {
  11.     Column() {
  12.       TextInput({ text: this.text, controller: this.controller })
  13.         .placeholderFont({ size: 16, weight: 400 })
  14.         .width(336)
  15.         .height(56)
  16.         .maxLength(6)
  17.         .showCounter(true, {
  18.           thresholdPercentage: 50,
  19.           highlightBorder: true,
  20.           counterTextColor: ColorMetrics.resourceColor(Color.Red),
  21.           counterTextOverflowColor: ColorMetrics.resourceColor(Color.Orange)
  22.         })
  23.         .onChange((value: string) => {
  24.           this.text = value;
  25.         })
  26.     }.width('100%').height('100%').backgroundColor('#F1F3F5')
  27.   }
  28. }

示例23（设置placeholder富文本样式）

从API version 22开始，该示例通过setStyledPlaceholder接口设置placeholder富文本样式。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. import { LengthMetrics } from '@kit.ArkUI';
  3. @Entry
  4. @Component
  5. struct TextInputExample  {
  6.   styledString: MutableStyledString =
  7.     new MutableStyledString("输入框富文本：文本",
  8.       [
  9.         {
  10.           start: 0,
  11.           length: 7,
  12.           styledKey: StyledStringKey.FONT,
  13.           styledValue: new TextStyle({
  14.             fontColor: Color.Orange,
  15.             fontSize: LengthMetrics.fp(24)
  16.           })
  17.         },
  18.         {
  19.           start: 7,
  20.           length: 4,
  21.           styledKey: StyledStringKey.FONT,
  22.           styledValue: new TextStyle({
  23.             fontColor: Color.Gray,
  24.             fontSize: LengthMetrics.fp(20),
  25.             strokeWidth: LengthMetrics.px(-5),
  26.             strokeColor: Color.Black,
  27.           })
  28.         },
  29.         {
  30.           start: 0,
  31.           length: 1,
  32.           styledKey: StyledStringKey.PARAGRAPH_STYLE,
  33.           styledValue: new ParagraphStyle({
  34.             textVerticalAlign: TextVerticalAlign.CENTER
  35.           })
  36.         }
  37.       ]);
  38.   controllerInput: TextInputController = new TextInputController();
  39. 

  40.   aboutToAppear() {
  41.     this.controllerInput.setStyledPlaceholder(this.styledString)
  42.   }
  43. 

  44.   build() {
  45.     Scroll() {
  46.       Column() {
  47.         Text("TextInput placeholder富文本")
  48.           .fontSize(8)
  49.         TextInput({
  50.           controller: this.controllerInput
  51.         })
  52.           .fontSize(24)
  53.           .margin(10)
  54.       }
  55.       .width('100%')
  56.     }
  57.   }
  58. }

示例24（设置输入法扩展信息）

从API version 22开始，该示例通过IMEClient的setExtraConfig设置输入法扩展信息。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   build() {
  6.     Column() {
  7.       TextInput({ text: '拉起输入法前执行onWillAttachIME回调' })
  8.         .onWillAttachIME((client: IMEClient) => {
  9.           client.setExtraConfig({
  10.             customSettings: {
  11.               name: "TextInput", // 自定义属性
  12.               id: client.nodeId // 自定义属性
  13.             }
  14.           })
  15.         })
  16.     }.height('100%')
  17.   }
  18. }

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

从API version 10开始，该示例通过barState接口设置内联输入风格编辑态时滚动条的显示或隐藏状态。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct demo {
  4.   @State message: string = '这里是一段长文本'.repeat(10)
  5. 

  6.   build() {
  7.     Column({ space: 20 }) {
  8.       TextInput({ text: '内联模式，设置BarState.On，' + this.message })
  9.         .style(TextInputStyle.Inline)
  10.         .barState(BarState.On)
  11. 

  12.       TextInput({ text: '内联模式，设置BarState.Off，' + this.message })
  13.         .style(TextInputStyle.Inline)
  14.         .barState(BarState.Off)
  15.     }
  16.     .width('100%')
  17.     .height('100%')
  18.     .padding(20)
  19.     .justifyContent(FlexAlign.Center)
  20.   }
  21. }

示例26（设置行首标点压缩）

该示例通过compressLeadingPunctuation接口设置行首标点压缩，左侧有间距的标点符号位于行首时，标点会直接压缩间距至左侧边界。

从API version 23开始，支持compressLeadingPunctuation接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5.   build() {
  6.     Column(){
  7.       TextInput({ text: "\u300C行首标点压缩打开" })
  8.         .compressLeadingPunctuation(true)
  9.         .margin(5)
  10.         .style(TextInputStyle.Inline)
  11.         .fontSize(30)
  12.         .width("90%")
  13.       TextInput({ text: "\u300C行首标点压缩关闭" })
  14.         .compressLeadingPunctuation(false)
  15.         .style(TextInputStyle.Inline)
  16.         .fontSize(30)
  17.         .width("90%")
  18.     }
  19.   }
  20. }

示例27（设置自适应间距）

该示例通过includeFontPadding接口增加首行尾行间距和fallbackLineSpacing接口设置自适应行间距。

从API version 23开始，新增includeFontPadding和fallbackLineSpacing接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. 

  3. const UYGHUR_TEXT: string = 'ياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەنياخشىمۇسەن';
  4. @Entry
  5. @Component
  6. struct Index {
  7.   @State include: boolean | null | undefined = false;
  8.   @State fallback: boolean | null | undefined = false;
  9.   @State displayText: string = UYGHUR_TEXT;
  10. 

  11.   build() {
  12.     Column() {
  13.       TextInput({
  14.         text: this.displayText,
  15.         placeholder: '请输入内容...'
  16.       })
  17.         .includeFontPadding(this.include)
  18.         .fallbackLineSpacing(this.fallback)
  19.         .lineHeight(5)
  20.         .width('100%')
  21.         .height(100)
  22.         .backgroundColor('#eee')
  23.         .borderWidth(1)
  24.         .borderColor('#dddddd')
  25. 

  26.       Scroll() {
  27.         Column() {
  28.           // --- IncludeFontPadding相关按钮 ---
  29.           Button('设置includePadding: ' + this.include)
  30.             .onClick(() => {
  31.               this.include = this.include === false ? true : false;
  32.             })
  33.             .margin({ bottom: 10 })
  34. 

  35.           // --- FallbackLineSpacing相关按钮 ---
  36.           Button('设置fallbackLineSpacing: ' + this.fallback)
  37.             .onClick(() => {
  38.               this.fallback = this.fallback === false ? true : false;
  39.             })
  40.             .margin({ bottom: 10 })
  41. 

  42.         }
  43.         .width('100%')
  44.         .padding(5)
  45.       }
  46.       .height(250)
  47.       .backgroundColor('transparent')
  48.       .scrollBarWidth(2)
  49.       .scrollBarColor('#888')
  50. 

  51.     }
  52.     .width('100%')
  53.     .height('100%')
  54.     .padding(20)
  55.   }
  56. }

示例28（设置文本拖拽时的背板样式）

该示例通过selectedDragPreviewStyle接口设置文本拖拽时的背板样式。

从API version 23开始，新增selectedDragPreviewStyle接口。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct TextInputTest {
  4.   build() {
  5.     Column() {
  6.       TextInput({ text: 'HelloWorld', placeholder: 'please input words' })
  7.         .copyOption(CopyOptions.InApp)
  8.         .width(200)
  9.         .height(50)
  10.         .margin(150)
  11.         .draggable(true)
  12.         .selectedDragPreviewStyle({color: 'rgba(227, 248, 249, 1)'})
  13.     }
  14.     .height('100%')
  15.   }
  16. }

示例29（删除文本框内的最后一个字符）

该示例通过调用deleteBackward接口删除文本框内最后一个字符。

从API version 23开始，新增deleteBackward接口。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Page {
  4.   controller: TextInputController = new TextInputController();
  5. 

  6.   build() {
  7.     Column() {
  8.       TextInput({ text: 'TextInput输入框Deletebackward示例', controller: this.controller })
  9.       Button('Delete backward')
  10.         .onClick(() => {
  11.           this.controller.deleteBackward();
  12.         })
  13.     }
  14.   }
  15. }

示例30（设置文本排版方向）

该示例通过textDirection接口设置文本排版方向。

从API version 23开始，新增textDirection接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = 'TextInput文本排版方向示例';
  6. 

  7.   build() {
  8.     Column() {
  9.       Text('TextInput文本排版方向RTL，布局方向default')
  10.         .fontSize(12).width('90%').margin(5)
  11.       TextInput({ text: this.text })
  12.         .width(336)
  13.         .fontSize(16)
  14.         .textDirection(TextDirection.RTL)
  15.         .showCounter(true)
  16.         .maxLength(50)
  17.       Text('TextInput文本排版方向RTL，布局方向default，文本水平方向对齐方式LEFT')
  18.         .fontSize(12).width('90%').margin(5)
  19.       TextInput({ text: this.text })
  20.         .width(336)
  21.         .fontSize(16)
  22.         .textDirection(TextDirection.RTL)
  23.         .showCounter(true)
  24.         .maxLength(50)
  25.         .textAlign(TextAlign.LEFT)
  26.       Text('TextInput文本排版方向LTR，布局方向Rtl')
  27.         .fontSize(12).width('90%').margin(5)
  28.       TextInput({ text: this.text })
  29.         .width(336)
  30.         .fontSize(16)
  31.         .textDirection(TextDirection.LTR)
  32.         .direction(Direction.Rtl)
  33.         .maxLength(50)
  34.         .showCounter(true)
  35.     }.width('100%').height('100%')
  36.   }
  37. }

示例31（将指定范围的文字滚动到可视区内）

本示例通过scrollToVisible将可视区外的文本滚动到可视区内。

从API version 23开始，新增scrollToVisible接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5.   @State text: string = '12345678912345678912346789123456789123456789012121214521';
  6.   controller: TextInputController = new TextInputController();
  7. 

  8.   build() {
  9.     Column() {
  10.       TextInput({ text: this.text, controller: this.controller })
  11.         .width(336)
  12.         .height(56)
  13.       Button("滚动文本到可视区").onClick(()=> {
  14.         this.controller.scrollToVisible({ start: 22, end: 30})
  15.       })
  16.     }.width('100%').height('100%').backgroundColor('#F1F3F5')
  17.   }
  18. }

示例32（设置文本排版时是否使能孤字优化）

该示例通过orphanCharOptimization接口设置使能孤字优化，确保段落最后一行不出现孤字。

从API版本26.0.0开始，新增orphanCharOptimization接口。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextExample {
  5.   @State text: string = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa文本aaaaaaaaaaaaa';
  6. 

  7.   build() {
  8.     Column({ space: 3 }) {
  9.       Text('TextInput不使能孤字优化')
  10.         .fontSize(12).width('90%').margin(5)
  11.       TextInput({ text: this.text })
  12.         .fontSize(20)
  13.         .width('384')
  14.         .borderWidth(1)
  15.         .style(TextInputStyle.Inline)
  16.       Text('TextInput使能孤字优化')
  17.         .fontSize(12).width('90%').margin(5)
  18.       TextInput({ text: this.text })
  19.         .fontSize(20)
  20.         .width('384')
  21.         .borderWidth(1)
  22.         .orphanCharOptimization(true)
  23.         .style(TextInputStyle.Inline)
  24.     }
  25.     .width('100%')
  26.     .height('100%')
  27.   }
  28. }

该效果图会因设备尺寸差异有显示区别，仅供参考。

不开启孤字优化：

开启孤字优化：

示例33（设置文本选择的AI菜单）

该示例通过enableSelectedDataDetector，配置文本选择AI菜单功能。

从API version 22开始，新增enableSelectedDataDetector。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Demo33 {
  4.   exampleText: string = '示例网址：www.example.com';
  5. 

  6.   build() {
  7.     Column() {
  8.       Row() {
  9.         TextInput({ text: this.exampleText })
  10.           .copyOption(CopyOptions.LocalDevice)
  11.           .enableSelectedDataDetector(true)
  12.           .border({ width: 1, color: Color.Black })
  13.           .height(300)
  14.           .margin(10)
  15.       }
  16.     }
  17.   }
  18. }

相关推荐
文档TextArea
文档Text
文档input
文档输入框类组件通用接口
文档Search
文档RichEditor
文档text
文档文本组件公共接口
文档ArkUI_NodeAttributeType（文本输入类组件相关属性）
文档textarea
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词