閱讀(953) 書簽贊(0) 我要糾錯(cuò)

單行文本輸入框組件

2024-01-22 17:30 更新

單行文本輸入框組件。

說明

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

子組件

無

接口

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

參數(shù)：

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

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

placeholder

ResourceStr

否

設(shè)置無輸入時(shí)的提示文本。

text

ResourceStr

否

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

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

controller8+

TextInputController

否

設(shè)置TextInput控制器。

屬性

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

名稱	參數(shù)類型	描述
type	InputType	設(shè)置輸入框類型。默認(rèn)值：InputType.Normal
placeholderColor	ResourceColor	設(shè)置placeholder文本顏色。
placeholderFont	Font	設(shè)置placeholder文本樣式。
enterKeyType	EnterKeyType	設(shè)置輸入法回車鍵類型。默認(rèn)值：EnterKeyType.Done
caretColor	ResourceColor	設(shè)置輸入框光標(biāo)顏色。
maxLength	number	設(shè)置文本的最大輸入字符數(shù)。
inputFilter8+	{ value: ResourceStr, error?: (value: string) => void }	正則表達(dá)式，匹配表達(dá)式的輸入允許顯示，不匹配的輸入將被過濾。目前僅支持單個(gè)字符匹配，不支持字符串匹配。 - value：設(shè)置正則表達(dá)式。 - error：正則匹配失敗時(shí)，返回被過濾的內(nèi)容。
copyOption9+	CopyOptions	設(shè)置輸入的文本是否可復(fù)制。設(shè)置CopyOptions.None時(shí)，當(dāng)前TextInput中的文字無法被復(fù)制或剪切，僅支持粘貼。
showPasswordIcon9+	boolean	密碼輸入模式時(shí)，輸入框末尾的圖標(biāo)是否顯示。默認(rèn)值：true
style9+	TextInputStyle	設(shè)置輸入框?yàn)槟J(rèn)風(fēng)格或內(nèi)聯(lián)輸入風(fēng)格。默認(rèn)值：TextInputStyle.Default
textAlign9+	TextAlign	設(shè)置輸入文本在輸入框中的對(duì)齊方式。默認(rèn)值：TextAlign.Start

說明

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

{

top: 8 vp,

right: 16 vp,

bottom: 8 vp,

left: 16 vp

}

EnterKeyType枚舉說明

名稱	描述
Go	顯示為開始樣式。
Search	顯示為搜索樣式。
Send	顯示為發(fā)送樣式。
Next	顯示為下一個(gè)樣式。
Done	顯示為換行樣式。

InputType枚舉說明

名稱	描述
Normal	基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。
Password	密碼輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。密碼顯示小眼睛圖標(biāo)并且默認(rèn)會(huì)將文字變成圓點(diǎn)。
Email	郵箱地址輸入模式。支持?jǐn)?shù)字，字母，下劃線，以及@字符（只能存在一個(gè)@字符）。
Number	純數(shù)字輸入模式。
PhoneNumber9+	電話號(hào)碼輸入模式。支持輸入數(shù)字、+ 、-、*、#，長度不限。

TextInputStyle9+枚舉說明

名稱	描述
Default	默認(rèn)風(fēng)格，光標(biāo)寬1.5vp，光標(biāo)高度與文本選中底板高度和字體大小相關(guān)。
Inline	內(nèi)聯(lián)輸入風(fēng)格。文本選中底板高度與輸入框高度相同。內(nèi)聯(lián)輸入是在有明顯的編輯態(tài)/非編輯態(tài)的區(qū)分場景下使用，例如：文件列表視圖中的重命名。

名稱

描述

Default

默認(rèn)風(fēng)格，光標(biāo)寬1.5vp，光標(biāo)高度與文本選中底板高度和字體大小相關(guān)。

Inline

內(nèi)聯(lián)輸入風(fēng)格。文本選中底板高度與輸入框高度相同。

內(nèi)聯(lián)輸入是在有明顯的編輯態(tài)/非編輯態(tài)的區(qū)分場景下使用，例如：文件列表視圖中的重命名。

事件

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

名稱	功能描述
onChange(callback: (value: string) => void)	輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)。 value：輸入的文本內(nèi)容。觸發(fā)該事件的條件： 1、鍵盤輸入。 2、粘貼、剪切。 3、鍵盤快捷鍵Ctrl+v。
onSubmit(callback: (enterKey: EnterKeyType) => void)	按下輸入法回車鍵觸發(fā)該回調(diào)，返回值為當(dāng)前輸入法回車鍵的類型。 enterKeyType：輸入法回車鍵類型。具體類型見EnterKeyType枚舉說明。
onEditChanged(callback: (isEditing: boolean) => void)(deprecated)	輸入狀態(tài)變化時(shí)，觸發(fā)該回調(diào)。從API Version8開始，建議使用onEditChange。
onEditChange(callback: (isEditing: boolean) => void)8+	輸入狀態(tài)變化時(shí)，觸發(fā)該回調(diào)。isEditing為true表示正在輸入。
onCopy(callback:(value: string) => void)8+	長按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板復(fù)制按鈕，觸發(fā)該回調(diào)。 value：復(fù)制的文本內(nèi)容。
onCut(callback:(value: string) => void)8+	長按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板剪切按鈕，觸發(fā)該回調(diào)。 value：剪切的文本內(nèi)容。
onPaste(callback:(value: string) => void)8+	長按輸入框內(nèi)部區(qū)域彈出剪貼板后，點(diǎn)擊剪切板粘貼按鈕，觸發(fā)該回調(diào)。 value：粘貼的文本內(nèi)容。

TextInputController8+

TextInput組件的控制器。

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


controller: TextInputController = new TextInputController()

caretPosition

caretPosition(value: number): void

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

參數(shù)：

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

示例


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

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(400)
        .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .inputFilter('[a-z]', (e) => {
          console.log(JSON.stringify(e))
        })
        .onChange((value: string) => {
          this.text = value
        })
      Text(this.text)
      Button('Set caretPosition 1')
        .margin(15)
        .onClick(() => {
          // 將光標(biāo)移動(dòng)至第一個(gè)字符后
          this.controller.caretPosition(1)
        })
      // 密碼輸入框
      TextInput({ placeholder: 'input your password...' })
        .width(400)
        .height(40)
        .margin(20)
        .type(InputType.Password)
        .maxLength(9)
        .showPasswordIcon(true)
      // 內(nèi)聯(lián)風(fēng)格輸入框
      TextInput({ placeholder: 'inline style' })
        .width(400)
        .height(50)
        .margin(20)
        .borderRadius(0)
        .style(TextInputStyle.Inline)
    }.width('100%')
  }
}

以上內(nèi)容是否對(duì)您有幫助：

← 當(dāng)前系統(tǒng)時(shí)間

滑動(dòng)選擇文本內(nèi)容的組件 →

寫筆記

我要補(bǔ)充