鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件
一、操作环境
操作系统: Windows 10 专业版
IDE:DevEco Studio 3.1
SDK:HarmonyOS 3.1
二、TextInput
接口
{#ZH-CN_TOPIC_0000001333321201__%E6%8E%A5%E5%8F%A3}{#%E6%8E%A5%E5%8F%A3}
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
placeholder | ResourceStr | 否 | 无输入时的提示文本。 |
text | ResourceStr | 否 | 设置输入框当前的文本内容。 |
controller | TextInputController | 否 | 光标控制器,设置光标的下标位置。 |
示例:
TextInput({
placeholder: "Hello, Harmony"
})
TextInput({
placeholder: "Hello, Harmony",
text: "I'm OpenHarmony"
})
属性
{#ZH-CN_TOPIC_0000001333321201__%E5%B1%9E%E6%80%A7}{#%E5%B1%9E%E6%80%A7}
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
---|---|---|
type | InputType | 设置输入框类型。 默认值:InputType.Normal |
placeholderColor | ResourceColor | 设置placeholder颜色。 |
placeholderFont | Font | 设置placeholder文本样式: - size: 设置文本尺寸,Length为number类型时,使用fp单位。 - weight: 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 - family: 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 - style: 设置文本的字体样式。 |
enterKeyType | EnterKeyType | 设置输入法回车键类型。 默认值:EnterKeyType.Done |
caretColor | ResourceColor | 设置输入框光标颜色。 |
maxLength | number | 设置文本的最大输入字符数。 |
inputFilter8+ | { value: ResourceStr8+, error?: (value: string) => void } | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。 - value:设置正则表达式。 - error:正则匹配失败时,返回被忽略的内容。 |
EnterKeyType枚举说明
{#ZH-CN_TOPIC_0000001333321201__enterkeytype%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E}{#enterkeytype%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E}
名称 | 描述 |
---|---|
Go | 显示Go文本。 |
Search | 显示为搜索样式。 |
Send | 显示为发送样式。 |
Next | 显示为下一个样式。 |
Done | 标准样式。 |
InputType枚举说明
{#ZH-CN_TOPIC_0000001333321201__inputtype%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E}{#inputtype%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E}
名称 | 描述 |
---|---|
Normal | 基本输入模式。 |
Password | 密码输入模式。 |
e-mail地址输入模式。 | |
Number | 纯数字输入模式。 |
事件
{#ZH-CN_TOPIC_0000001333321201__%E4%BA%8B%E4%BB%B6}{#%E4%BA%8B%E4%BB%B6}
名称 | 功能描述 |
---|---|
onChange(callback: (value: string) => void) | 输入发生变化时,触发回调。 |
onSubmit(callback: (enterKey: EnterKeyType) => void) | 回车键或者软键盘回车键触发该回调,参数为当前软键盘回车键类型。 |
onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时,触发回调。 |
onEditChange(callback: (isEditing: boolean) => void) 8+ | 输入状态变化时,触发回调。 |
onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发回调。 value:复制的文本内容。 |
onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发回调。 value:剪切的文本内容。 |
onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发回调。 value:粘贴的文本内容。 |
本文来自极简博客,作者:美食旅行家,转载请注明原文链接:鸿蒙(HarmonyOS) 方舟框架(ArkUI)之TextInput输入框组件