TextArea

多行文本输入框组件,当输入的文本内容超过组件宽度的时候会自动换行显示

高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。

子组件

无

参数

placeholder

提示语

text

默认文本内容

属性

placeholderColor

提示语颜色

placeholderFont

提示语样式

• weight: 字体粗细

FontWeight.Bold

• size: 字体大小

10

• style:

样式

FontStyle.Italic

textAlign

文字对齐方式

fontColor

字体颜色

fontSize

字体大小

fontStyle

字体样式 比如斜体 FontStyle.Italic

fontFamily

设置字体列表。

maxLength

最大长度

maxLines

最大行数

enterKeyType

输入法回车键类型

• EnterKeyType.Go 显示为开始的样式

• EnterKeyType.Next 显示为下一步的样式

• EnterKeyType.Send 显示为发送的样式

• EnterKeyType.Search 显示为搜索的样式

• EnterKeyType.Done 显示为完成的样式

• EnterKeyType.PREVIOUS 显示为上一步的样式

• EnterKeyType.NEW_LINE 显示为换行的样式

showCounter

• 计数器

.showCounter(true, { thresholdPercentage: 50, highlightBorder: true })

自动填充

注意

1. contentType(ContentType.EMAIL_ADDRESS)

2. enableAutoFill(true)

事件

• onChange 事件

.onChange((value:string)=>{
     this.message = value
     console.info(this.message)
})

• onSubmit 事件

.onSubmit((enterKey: EnterKeyType) => {
    console.log("trigger area onsubmit" + enterKey);
  })

示例

基础版

@Entry
@Component
struct Index2 {
    @State message:string = "默认值"
    build() {
       Column(){
           Row(){
               TextArea({
                   placeholder:"请输入",
                   text:this.message
               })
                   .placeholderColor(Color.Red)
                   .placeholderFont({
                       weight:FontWeight.Bold,
                       size:10,
                       style:FontStyle.Italic
                   })
                   .textAlign(TextAlign.Center)
                   .fontColor(Color.Red)
                   .fontSize(32)
                   .fontStyle(FontStyle.Italic)
                   .maxLines(3)
                   .onChange((value:string)=>{
                       this.message = value
                       console.info(this.message)
                   })
                   .onSubmit((enterKey: EnterKeyType) => {
                       console.log("trigger area onsubmit" + enterKey);
                   })
           }
       }
    }
}

设置计数器

@Entry
@Component
struct Index2 {
    @State message:string = "默认值"
    controller:TextAreaController = new TextAreaController()
    build() {
       Column(){
           Row(){
               TextArea({
                   placeholder:"请输入",
                   text:this.message,
                   controller:this.controller
               })
                   .placeholderColor(Color.Red)
                   .placeholderFont({
                       weight:FontWeight.Bold,
                       size:10,
                       style:FontStyle.Italic
                   })
           //计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
           //如果用户当前输入字符数达到最大字符限制乘50%（thresholdPercentage）。字符计数器显示。
           //用户设置highlightBorder为false时，配置取消红色边框。不设置此参数时，默认为true。
                   .showCounter(true, { thresholdPercentage: 50, highlightBorder: true })
                   .textAlign(TextAlign.Center)
                   .fontColor(Color.Red)
                   .fontSize(32)
                   .fontStyle(FontStyle.Italic)
                   .maxLength(10)
                   .onChange((value:string)=>{
                       this.message = value
                       console.info(this.message)
                   })
                   .onSubmit((enterKey: EnterKeyType) => {
                       console.log("trigger area onsubmit" + enterKey);
                   })
                   // 改变回车键类型

                   .enterKeyType(EnterKeyType.Search)
           }
       }
    }
}