1# TextInput 2 3提供单行文本输入组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?: [ResourceStr](ts-types.md#resourcestr8), controller?: TextInputController}) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ----------------------- | ---------------------------------------- | ---- | --------------- | 23| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 | 24| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 | 25| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 | 26 27## 属性 28 29除支持通用属性外，还支持以下属性： 30 31| 名称 | 参数类型 | 描述 | 32| ------------------------ | ---------------------------------------- | ---------------------------------------- | 33| type | InputType | 设置输入框类型。<br/>默认值：InputType.Normal | 34| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 | 35| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：<br/>- size: 设置文本尺寸，Length为number类型时，使用fp单位。<br/>- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。<br/>- style: 设置文本的字体样式。 | 36| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值：EnterKeyType.Done | 37| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 | 38| maxLength | number | 设置文本的最大输入字符数。 | 39| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?: (value: string) => void<br/>} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>- value：设置正则表达式。<br/>- error：正则匹配失败时，返回被忽略的内容。 | 40 41## EnterKeyType枚举说明 42 43| 名称 | 描述 | 44| ------ | --------- | 45| Go | 显示Go文本。 | 46| Search | 显示为搜索样式。 | 47| Send | 显示为发送样式。 | 48| Next | 显示为下一个样式。 | 49| Done | 标准样式。 | 50 51## InputType枚举说明 52 53| 名称 | 描述 | 54| -------- | ------------- | 55| Normal | 基本输入模式。 | 56| Password | 密码输入模式。 | 57| Email | e-mail地址输入模式。 | 58| Number | 纯数字输入模式。 | 59 60## 事件 61 62| 名称 | 功能描述 | 63| ---------------------------------------- | ---------------------------------------- | 64| onChange(callback: (value: string) => void) | 输入发生变化时，触发回调。 | 65| onSubmit(callback: (enterKey: EnterKeyType) => void) | 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。 | 66| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated) </sup> | 输入状态变化时，触发回调。 | 67| onEditChange(callback: (isEditing: boolean) => void) <sup>8+</sup> | 输入状态变化时，触发回调。 | 68| onCopy<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>value：复制的文本内容。 | 69| onCut<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>value：剪切的文本内容。 | 70| onPaste<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>value：粘贴的文本内容。 | 71 72## TextInputController<sup>8+</sup> 73 74TextInput组件的控制器。 75 76### 导入对象 77``` 78controller: TextInputController = new TextInputController() 79``` 80### caretPosition 81 82caretPosition(value: number): void 83 84设置光标移动到指定位置。 85 86**参数：** 87 88| 参数名 | 参数类型 | 必填 | 参数描述 | 89| ----- | ------ | ---- | ---------------------------------------- | 90| value | number | 是 | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 | 91 92## 示例 93 94 95### 单行文本输入 96 97```ts 98// xxx.ets 99@Entry 100@Component 101struct TextInputExample1 { 102 @State text: string = '' 103 104 build() { 105 Column() { 106 TextInput({ placeholder: 'input your word' }) 107 .placeholderColor("rgb(0,0,225)") 108 .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) 109 .caretColor(Color.Blue) 110 .height(50) 111 .fontSize(30) 112 .fontWeight(FontWeight.Bold) 113 .fontFamily("sans-serif") 114 .fontStyle(FontStyle.Normal) 115 .fontColor(Color.Red) 116 .onChange((value: string) => { 117 this.text = value 118 }) 119 Text(this.text).width('90%') 120 } 121 } 122} 123``` 124 125 126 127 128 129### 设置光标 130 131```ts 132// xxx.ets 133@Entry 134@Component 135struct TextInputExample2 { 136 @State text: string = '' 137 controller: TextInputController = new TextInputController() 138 build() { 139 Column() { 140 TextInput({ placeholder: 'Please input your words.', controller:this.controller}) 141 Button('caretPosition') 142 .onClick(() => { 143 this.controller.caretPosition(4) 144 }) 145 } 146 } 147} 148``` 149 150 151
