1、描述
多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
2、接口
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
3、参数
参数名 | 参数类型 | 必填 | 描述 |
placeholder | ResourceStr | 否 | 设置无输入时的提示文本,输入内容后,提示文本不显示。 |
text | ResourceStr | 否 | 设置输入框当前的文本内容。 |
controller | TextAreaController | 否 | 设备TextArea控制器。 |
4、属性
除了通用属性外,还支持以下属性
名称 | 参数类型 | 描述 |
placeholderColor | ResourceColor | 设置placeholder文本颜色。 |
placeholderFont | Font | 设置placeholder文本的样式。包括文字大小、文字粗细等。 |
textAlign | TextAlign | 设置文本在输入框中的水平对齐方式。 |
caretColor | ResourceColor | 设置输入光标的颜色 |
inputFilter | { value: ResourceStr, error?: (value: string) => void } | 通过正则表达式设置输入过滤器。 |
copyOption | CopyOptions | 设置输入的文本是否可复制。设置CopyOptions.None时,当前TextArea中的文本无法被复制或者剪切,仅支持粘贴。 |
5、事件
onChange - 输入内容发生变化时触发该回调。
onCopy - 长按输入框内部区域,弹出剪贴板后,点击复制按钮,触发该回调。
onCut - 长按输入框内部区域,弹出剪贴板后,点击剪切按钮,触发该回调。
onPaste - 长按输入框内部区域,弹出剪贴板后,点击粘贴按钮,触发该回调。
onContentScroll - 文本内容滚动时,触发该回调。
- TextAreaController
它是TextArea组件的控制器。
导入对象:
controller:TextAreaController = new TextAreaController();
caretPosition(value: number): void
value是设置输入光标的位置(从字符串开始到光标所在位置的字符长度)。
7、实例
import router from '@ohos.router';@Entry
@Component
struct TextAreaPage {@State message: string = '多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。'@State textContent: string = '';@State copyContent: string = '';@State cutContent: string = '';@State pasteContent: string = '';// 实例化TextArea的控制器controller: TextAreaController = new TextAreaController();build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width('96%')Blank(12)TextArea({ placeholder: '请输入你的描述', text: this.textContent, controller: this.controller }).placeholderColor(Color.Red)// 设置未输入内容时提示内容的颜色.placeholderFont({ size: 20, weight: FontWeight.Bold })// 设置提示内容的样式如:文本大小、文本粗细等.width('96%').height(200).fontColor(Color.Green).fontSize(20).padding(12).textAlign(TextAlign.Start)// 设置输入框中文本的对其方式.backgroundColor(Color.Yellow)// 设置输入框背景颜色.caretColor(Color.Black)// 设置光标颜色.onChange((value: string) => { // 监听输入内容this.textContent = value;}).onCopy((value: string) => { // 监听复制输入的内容console.log("onCopy value = " + value)this.copyContent = value;}).onCut((value: string) => { // // 监听剪切输入的内容console.log("onCut value = " + value)this.cutContent = value;}).onPaste((value: string) => { // 监听粘贴到输入框中的内容console.log("onPaste value = " + value)this.pasteContent = value;})Blank(12)Text(this.textContent).width('96%').fontSize(20)Blank(12)Text("copyContent = " + this.copyContent + " - cutContent = " + this.cutContent + " - pasteContent = " + this.pasteContent).width('96%').fontSize(20)Blank(12)Button("TextArea文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/textArea/TextAreaDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}
8、效果图