# 4.4:输入框组件

ArkUI开发框架提供了 2 种类型的输入框: TextInputTextArea ,前者只支持单行输入,后者支持多行输入,下面我们分别做下介绍。

# 4.4.1 TextInput定义介绍

interface TextInputInterface {
  (value?: TextInputOptions): TextInputAttribute;
}

declare interface TextInputOptions {
  placeholder?: ResourceStr;
  text?: ResourceStr;
  controller?: TextInputController;
}
1
2
3
4
5
6
7
8
9
  • value:输入框的提示样式设置, TextInputOptions 参数类型说明如下:

    • text:设置输入框的初始显示文本,不设置时显示 placeholder 的内容。

    • placeholder:占位提示文本,当不设置 text 是,显示该文本。

    • controller:光标控制器,设置光标的下标位置。

    简单样例如下所示:

      样例运行结果如下图所示:

      4_1_1_1

    # 4.4.2 TextInput属性介绍

    declare class TextInputAttribute extends CommonMethod<TextInputAttribute> {
      type(value: InputType): TextInputAttribute;
      placeholderColor(value: ResourceColor): TextInputAttribute;
      placeholderFont(value?: Font): TextInputAttribute;
      enterKeyType(value: EnterKeyType): TextInputAttribute;
      caretColor(value: ResourceColor): TextInputAttribute;
      onEditChanged(callback: (isEditing: boolean) => void): TextInputAttribute;
      onEditChange(callback: (isEditing: boolean) => void): TextInputAttribute;
      onSubmit(callback: (enterKey: EnterKeyType) => void): TextInputAttribute;
      onChange(callback: (value: string) => void): TextInputAttribute;
      maxLength(value: number): TextInputAttribute;
      fontColor(value: ResourceColor): TextInputAttribute;
      fontSize(value: Length): TextInputAttribute;
      fontStyle(value: FontStyle): TextInputAttribute;
      fontWeight(value: number | FontWeight | string): TextInputAttribute;
      fontFamily(value: ResourceStr): TextInputAttribute;
      inputFilter(value: ResourceStr, error?: (value: string) => void): TextInputAttribute;
      onCopy(callback: (value: string) => void): TextInputAttribute;
      onCut(callback: (value: string) => void): TextInputAttribute;
      onPaste(callback: (value: string) => void): TextInputAttribute;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    TextInput 组件用于文本输入,它只能单行文本输入,若文本超出自身长度则使用 ... 在末尾替代。 TextInput 组件除了公共属性外,它还提供了很多常用的属性:

    • type:表示输入框的类型,比如设置为 Number ,则表示输入框只能输入数字。

    • enterKeyType:表示设置输入法回车键类型,主要用来控制回车键的显示样式。

      例如设置 enterKeyTypeSearchtypeNumber 时,结果如下图所示:

      4_4_1
    • maxLength:设置输入框允许输入多少字符。

    • caretColor:设置光标的颜色。

    # 4.4.3 TextInput事件介绍

    declare class TextInputAttribute extends CommonMethod<TextInputAttribute> {
      onEditChanged(callback: (isEditing: boolean) => void): TextInputAttribute;
      onEditChange(callback: (isEditing: boolean) => void): TextInputAttribute;
      onSubmit(callback: (enterKey: EnterKeyType) => void): TextInputAttribute;
      onChange(callback: (value: string) => void): TextInputAttribute;
      onCopy(callback: (value: string) => void): TextInputAttribute;
      onCut(callback: (value: string) => void): TextInputAttribute;
      onPaste(callback: (value: string) => void): TextInputAttribute;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    TextInput 除了具有公共事件外,它还提供了自己独有的事件回调。

    • onChange:当输入框的内容变化时,触发该回调并把输入框的值回调出来
    • onSubmit:回车键或者软键盘回车键触发该回调,参数为当前软键盘回车键类型。
    • onEditChanged:输入状态变化时,触发回调。

    TextInput 的一个简单示例如下:

      样例运行结果如下图所示:

      4_4_2

      # 4.4.4 TextArea简单介绍

      TextAreaTextInput 都属于输入框,只是 TextArea 允许多行输入,它们的属性也都大致是一样的,只是目前 TextArea 还不支持 maxLength 属性,这里就不再介绍 TextArea 的属性了。

      # 4.4.5:完整样例演示

      我们用一个简单的样例演示一下 TextInputTextArea 的使用,如下所示:

        样例运行结果如下图所示:

        4_4_3
        (adsbygoogle = window.adsbygoogle || []).push({});
        请作者喝杯咖啡

        津公网安备 12011402001367号

        津ICP备2020008934号-2

        中央网信办互联网违法和不良信息举报中心

        天津市互联网违法和不良信息举报中心