TextInput
官方文档
TextInput组件
https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-textinput-0000001427584864-V3#ZH-CN_TOPIC_0000001523968610__%E5%AD%90%E7%BB%84%E4%BB%B6
文本输入框组件
接口
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
TextInput({text:'请输入用户名'})
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| placeholder | ResourceStr | 否 | 设置无输入时的提示文本。 |
| text | ResourceStr | 否 | 设置输入框当前的文本内容。 设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。 |
| controller8+ | TextInputController | 否 | 设置TextInput控制器。 |
属性
除支持通用属性外，还支持以下属性：
| 名称 | 参数类型 | 描述 |
|---|---|---|
| type | InputType | 设置输入框类型。 默认值：InputType.Normal |
| placeholderColor | ResourceColor | 设置placeholder文本颜色。 |
| placeholderFont | Font | 设置placeholder文本样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。 默认值：EnterKeyType.Done |
| caretColor | ResourceColor | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter8+ | { value: ResourceStr, error?: (value: string) => void } | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。 - value：设置正则表达式。 - error：正则匹配失败时，返回被过滤的内容。 |
| copyOption9+ | CopyOptions | 设置输入的文本是否可复制。 设置CopyOptions.None时，当前TextInput中的文字无法被复制或剪切，仅支持粘贴。 |
| showPasswordIcon9+ | boolean | 密码输入模式时，输入框末尾的图标是否显示。 默认值：true |
| style9+ | TextInputStyle | 设置输入框为默认风格或内联输入风格。 默认值：TextInputStyle.Default |
| textAlign9+ | TextAlign | 设置输入文本在输入框中的对齐方式。 默认值：TextAlign.Start |
说明
通用属性padding的默认值为：
{top: 8 vp,right: 16 vp,bottom: 8 vp,left: 16 vp}
EnterKeyType枚举说明
| 名称 | 描述 |
|---|---|
| Go | 显示为前往样式。 |
| Search | 显示为搜索样式。 |
| Send | 显示为发送样式。 |
| Next | 显示为下一个样式。 |
| Done | 显示为确认样式。 |
InputType枚举说明
| 名称 | 描述 |
|---|---|
| Normal | 基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。 |
| Password | 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。 |
| | 邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。 |
| Number | 纯数字输入模式。 |
| PhoneNumber9+ | 电话号码输入模式。 支持输入数字、+ 、-、*、#，长度不限。 |
TextInputStyle9+枚举说明
| 名称 | 描述 |
|---|---|
| Default | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
| Inline | 内联输入风格。文本选中底板高度与输入框高度相同。 内联输入是在有明显的编辑态/非编辑态的区分场景下使用，例如：文件列表视图中的重命名。 |
事件
除支持通用事件外，还支持以下事件：
| 名称 | 功能描述 |
|---|---|
| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 value：输入的文本内容。 触发该事件的条件： 1、键盘输入。 2、粘贴、剪切。 3、键盘快捷键Ctrl+v。 |
| onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 enterKeyType：输入法回车键类型。具体类型见EnterKeyType枚举说明。 |
| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API Version8开始，建议使用onEditChange。 |
| onEditChange(callback: (isEditing: boolean) => void)8+ | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 |
| onCopy(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。 value：复制的文本内容。 |
| onCut(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。 value：剪切的文本内容。 |
| onPaste(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。 value：粘贴的文本内容。 |
TextInputController8+
TextInput组件的控制器。
导入对象
- controller: TextInputController = new TextInputController()
caretPosition
caretPosition(value: number): void
设置输入光标的位置。
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
.onClick(() => {
// 将光标移动至第一个字符后
this.controller.caretPosition(1)
})
