HarmonyOS Next快速入门：TextInput组件

##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##

TextInput组件用于输入单行文本，使用非常广泛，例如应用登录账号密码、发送消息等。

typescript 复制代码

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

placeholder：设置提示
text：设置文本
controller：设置TextInput控制器

设置输入类型

typescript 复制代码

.type(value: InputType)

InputType枚举类型：

InputType.Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
InputType.Password：密码输入模式。
InputType.Email：e-mail地址输入模式。
InputType.Number：纯数字输入模式。

获取输入文本设置onChange事件，输入文本发生变化时触发onChange事件执行回调函数。

typescript 复制代码

.onChange(callback: EditableTextOnChangeCallback)

代码实例：TextInputPage

typescript 复制代码

@Entry
@Component
struct TextInputPage {
  @State message: string = '第2节 TextInput组件';
  @State phone:string='';

  build() {
    Column({space:6}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      TextInput({placeholder:'请输入账号'})
      TextInput({text:'设置初始值'})
      TextInput({placeholder:'请输入密码'})
        .type(InputType.Password)
      TextInput({placeholder:'请输入手机号'})
        .type(InputType.Number)
        .onChange((value:string)=>{
          this.phone=value
        })
      Text('手机号码是：'+this.phone)
    }
    .height('100%')
    .width('100%')
  }
}

设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。

typescript 复制代码

showCounter(value: boolean, options?: InputCounterOptions)

参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxLength（设置最大字符限制）一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。
当输入字符数大于最大字符数乘百分比值时，显示字符计数器。如果用户设置计数器时不设置InputCounterOptions，那么当前输入字符数超过最大字符数时，边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions，当thresholdPercentage数值在有效区间内，且输入字符数超过最大字符数时，边框和计数器下标将变为红色，框体抖动。highlightBorder设置为false，则不显示红色边框，计数器默认显示红色，框体抖动。
内联模式和密码模式下字符计数器不显示。

代码实例：通过maxLength、showCounter、showUnderline属性实现了计数器的功能。

typescript 复制代码

@Entry
@Component
struct TextInputPage2 {
  @State text: string = '';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
        .showUnderline(true)
        .showCounter(true,
          { thresholdPercentage: 50, highlightBorder: true })//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
          //如果用户当前输入字符数达到最大字符限制乘50%（thresholdPercentage）。字符计数器显示。
          //用户设置highlightBorder为false时，配置取消红色边框。不设置此参数时，默认为true。
        .onChange((value: string) => {
          this.text = value;
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}