TextInput

效果

子组件

无

参数

placeholder

提示语

text

默认文本

controller

controller: TextInputController = new TextInputController();

控制器

属性

type

类型

• InputType.Password 密码类型

• InputType.Email 邮箱地址类型

• InputType.Number 数字类型

• InputType.PhoneNumber 电话号码类型

• InputType.NUMBER_PASSWORD 纯数字密码类型

• InputType.USER_NAME 用户名输入类型

• InputType.NEW_PASSWORD 新密码输入类型

• InputType.URL 带 URL 的输入模式

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 Index3 {
    @State Inputmessage: string = '';
    controller:TextInputController = new TextInputController();
    @Styles CommonState(){
        .width(300)
        .height(50)
        .margin({
            left:25,
            top:30
        })
        .backgroundColor(Color.Gray)
        .borderRadius(10)
    }
  build() {
       Column(){
         Row(){
           TextInput({
             placeholder:"请输入",
             text:this.Inputmessage,
             controller:this.controller
           })
               .CommonState()
               .onChange((value:string)=>{
                   console.info(value)
               })
             // 下面开始都是属性
               .type(InputType.Password)

               //  设置取消按钮样式
               .cancelButton({
                   style: CancelButtonStyle.CONSTANT,
                   icon: {
                       size: 45,
                       src: $r('app.media.app_icon'),
                       color: Color.Blue
                   }
               })
         }
       }
    }
}