1# TextArea 2 3提供多行文本输入组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController}) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ----------------------- | ---------------------------------------- | ---- | -------------- | 23| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 | 24| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 | 25| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | 设置TextArea控制器。 | 26 27## 属性 28 29除支持通用属性外，还支持以下属性： 30 31| 名称 | 参数类型 | 描述 | 32| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 33| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 | 34| 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: 设置文本的字体样式。 | 35| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐方式。<br/>默认值：TextAlign.Start | 36| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 | 37| 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：正则匹配失败时，返回被忽略的内容。 | 38 39## 事件 40 41| 名称 | 功能描述 | 42| ------------------------------------------------------------ | ------------------------------------------------------------ | 43| onChange(callback: (value: string) => void) | 输入发生变化时，触发回调。 | 44| onCopy<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>- value：复制的文本内容。 | 45| onCut<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>- value：剪切的文本内容。 | 46| onPaste<sup>8+</sup>(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>- value：粘贴的文本内容。 | 47 48## TextAreaController<sup>8+</sup> 49 50TextArea组件的控制器，通过它操作TextArea组件。 51 52### 导入对象 53 54``` 55controller: TextAreaController = new TextAreaController() 56 57``` 58 59### caretPosition<sup>8+</sup> 60 61caretPosition(value: number): void 62 63设置输入光标的位置。 64 65**参数：** 66 67| 参数名 | 参数类型 | 必填 | 参数描述 | 68| ------ | -------- | ---- | -------------------------------------- | 69| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 | 70 71## 示例 72 73 74### 多行文本输入 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct TextAreaExample1 { 81 controller: TextAreaController = new TextAreaController() 82 @State text: string = '' 83 build() { 84 Column() { 85 TextArea({ placeholder: 'input your word', controller: this.controller}) 86 .placeholderColor("rgb(0,0,225)") 87 .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) 88 .textAlign(TextAlign.Center) 89 .caretColor(Color.Blue) 90 .height(50) 91 .fontSize(30) 92 .fontWeight(FontWeight.Bold) 93 .fontFamily("sans-serif") 94 .fontStyle(FontStyle.Normal) 95 .fontColor(Color.Red) 96 .inputFilter('^[\u4E00-\u9FA5A-Za-z0-9_]+$',(value: string) => { 97 console.info("hyb"+value) 98 }) 99 .onChange((value: string) => { 100 this.text = value 101 this.controller.caretPosition(-1) 102 }) 103 Text(this.text).width('90%') 104 } 105 } 106} 107``` 108 109 110 111 112### 设置光标 113 114```ts 115// xxx.ets 116@Entry 117@Component 118struct TextAreaExample2 { 119 controller: TextAreaController = new TextAreaController() 120 build() { 121 Column() { 122 TextArea({ placeholder: 'input your word',controller:this.controller }) 123 Button('caretPosition') 124 .onClick(() => { 125 this.controller.caretPosition(4) 126 }) 127 } 128 } 129} 130``` 131 132 133
