ArkUI-文本输入

项目案例 (opens new window)

arkts-common-components-text-input.md

• 响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入，登录注册输入
• 输入模式:基本输入,密码输入

案例一

@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 })

      Row()
      TextInput()
      // 绑定onChange事件可以获取输入框内改变的内容
        .onChange((value: string) => {
          console.info(value);
        })
        // 焦点事件
        .onFocus(() => {
          console.info('获取焦点');
        })
        .margin(10)

      // 单行输入框
      TextInput({ placeholder:"单行输入框" })
      // 多行输入框 多行输入框文字超出一行时会自动折行
      TextArea({ placeholder:"多行输入框" })
      // 基本输入模式（默认类型）
      TextInput({ placeholder:"基本输入模式" })
        .type(InputType.Normal)
      // 密码输入模式
      TextInput({ placeholder:"密码输入模式" })
        .type(InputType.Password)
      // 设置无输入时的提示文本
      TextInput({placeholder:'我是提示文本'})
      // 设置输入框当前的文本内容
      TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
      // 添加backgroundColor改变输入框的背景颜色。
      TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
        .backgroundColor(Color.Pink)
    }.padding(20)
  }
}