閱讀(1k) 書(shū)簽贊(0) 我要糾錯(cuò)

多行文本輸入框組件

2024-01-22 17:29 更新

多行文本輸入框組件，當(dāng)輸入的文本內(nèi)容超過(guò)組件寬度時(shí)會(huì)自動(dòng)換行顯示。

高度未設(shè)置時(shí)，組件無(wú)默認(rèn)高度，自適應(yīng)內(nèi)容高度。寬度未設(shè)置時(shí)，默認(rèn)撐滿最大寬度。

說(shuō)明

該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

無(wú)

接口

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
placeholder	ResourceStr	否	設(shè)置無(wú)輸入時(shí)的提示文本，輸入內(nèi)容后，提示文本不顯示。
text	ResourceStr	否	設(shè)置輸入框當(dāng)前的文本內(nèi)容。設(shè)置輸入框當(dāng)前的文本內(nèi)容。當(dāng)組件設(shè)置stateStyles等刷新屬性時(shí)，建議通過(guò)onChange事件將狀態(tài)變量與文本實(shí)時(shí)綁定，避免組件刷新時(shí)TextArea中的文本內(nèi)容異常。
controller8+	TextAreaController	否	設(shè)置TextArea控制器。

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

placeholder

ResourceStr

否

設(shè)置無(wú)輸入時(shí)的提示文本，輸入內(nèi)容后，提示文本不顯示。

text

ResourceStr

否

設(shè)置輸入框當(dāng)前的文本內(nèi)容。

設(shè)置輸入框當(dāng)前的文本內(nèi)容。當(dāng)組件設(shè)置stateStyles等刷新屬性時(shí)，建議通過(guò)onChange事件將狀態(tài)變量與文本實(shí)時(shí)綁定，避免組件刷新時(shí)TextArea中的文本內(nèi)容異常。

controller8+

TextAreaController

否

設(shè)置TextArea控制器。

屬性

除支持通用屬性外，還支持以下屬性：

名稱	參數(shù)類型	描述
placeholderColor	ResourceColor	設(shè)置placeholder文本顏色。
placeholderFont	Font	設(shè)置placeholder文本樣式，包括字體大小，字體粗細(xì)，字體族，字體風(fēng)格。目前僅支持默認(rèn)字體族。
textAlign	TextAlign	設(shè)置文本在輸入框中的水平對(duì)齊式。默認(rèn)值：TextAlign.Start
caretColor	ResourceColor	設(shè)置輸入框光標(biāo)顏色。
inputFilter8+	{ value: ResourceStr, error?: (value: string) => void }	通過(guò)正則表達(dá)式設(shè)置輸入過(guò)濾器。匹配表達(dá)式的輸入允許顯示，不匹配的輸入將被過(guò)濾。僅支持單個(gè)字符匹配，不支持字符串匹配。 - value：設(shè)置正則表達(dá)式。 - error：正則匹配失敗時(shí)，返回被過(guò)濾的內(nèi)容。
copyOption9+	CopyOptions	設(shè)置輸入的文本是否可復(fù)制。設(shè)置CopyOptions.None時(shí)，當(dāng)前TextArea中的文字無(wú)法被復(fù)制或剪切，僅支持粘貼。

說(shuō)明

通用屬性padding的默認(rèn)值為：

{

top: 8 vp,

right: 16 vp,

bottom: 8 vp,

left: 16 vp

}

事件

除支持通用事件外，還支持以下事件：

名稱	功能描述
onChange(callback: (value: string) => void)	輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)。 - value：當(dāng)前輸入的文本內(nèi)容。
onCopy8+(callback:(value: string) => void)	長(zhǎng)按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板復(fù)制按鈕，觸發(fā)該回調(diào)。 - value：復(fù)制的文本內(nèi)容。
onCut8+(callback:(value: string) => void)	長(zhǎng)按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板剪切按鈕，觸發(fā)該回調(diào)。 - value：剪切的文本內(nèi)容。
onPaste8+(callback:(value: string) => void)	長(zhǎng)按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板粘貼按鈕，觸發(fā)該回調(diào)。 - value：粘貼的文本內(nèi)容。

TextAreaController8+

TextArea組件的控制器，目前可通過(guò)它設(shè)置TextArea組件的光標(biāo)位置。

導(dǎo)入對(duì)象


controller: TextAreaController = new TextAreaController()

caretPosition8+

caretPosition(value: number): void

設(shè)置輸入光標(biāo)的位置。

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
value	number	是	從字符串開(kāi)始到光標(biāo)所在位置的字符長(zhǎng)度。

示例


// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State text: string = ''
  controller: TextAreaController = new TextAreaController()

  build() {
    Column() {
      TextArea({
        placeholder: 'The text area can hold an unlimited amount of text. input your word...',
        controller: this.controller
      })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .margin(20)
        .fontSize(16)
        .fontColor('#182431')
        .backgroundColor('#FFFFFF')
        .onChange((value: string) => {
          this.text = value
        })
      Text(this.text)
      Button('Set caretPosition 1')
        .backgroundColor('#007DFF')
        .margin(15)
        .onClick(() => {
          // 設(shè)置光標(biāo)位置到第一個(gè)字符后
          this.controller.caretPosition(1)
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}