文本輸入（TextInput/TextArea）

TextInput、TextArea是輸入框組件，通常用于響應(yīng)用戶的輸入操作，比如評論區(qū)的輸入、聊天框的輸入、表格的輸入等，也可以結(jié)合其它組件構(gòu)建功能頁面，例如登錄注冊頁面。具體用法參考TextInput、TextArea。

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

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

• 單行輸入框

  TextInput()

  

• 多行輸入框

  TextArea()

  

  多行輸入框文字超出一行時會自動折行。

  TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)

  

• 基本輸入模式（默認(rèn)類型）

  TextInput()
    .type(InputType.Normal)

  

• 密碼輸入模式

  TextInput()
    .type(InputType.Password)

  

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

  TextInput({placeholder:'我是提示文本',text:'我是當(dāng)前文本內(nèi)容'})

  

• 添加backgroundColor改變輸入框的背景顏色。

  TextInput({placeholder:'我是提示文本',text:'我是當(dāng)前文本內(nèi)容'})
    .backgroundColor(Color.Pink)

  

  更豐富的樣式可以結(jié)合通用屬性實現(xiàn)。

TextInput()
  .onChange((value: string) => {
    console.info(value);
  })
  .onFocus(() => {
    console.info('獲取焦點');
  })

@Entry
@Component
struct TextInputSample {
  build() {
    Column() {
      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
        .onSubmit((EnterKeyType)=>{
          console.info(EnterKeyType+'輸入法回車鍵的類型值')
        })
      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
        .onSubmit((EnterKeyType)=>{
          console.info(EnterKeyType+'輸入法回車鍵的類型值')
        })
      Button('Sign in').width(150).margin({ top: 20 })
    }.padding(20)
  }
}