TextInput

About 6 min

TextInput

说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

提供单行文本输入组件。

权限列表

子组件

接口

TextInput(value?: { placeholder?: string })

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    placeholder

    string

    -

    无输入时的提示文本。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

默认值

描述

type

InputType

InputType.Normal

设置输入框类型。

placeholderColor

Color

-

设置placeholder颜色。

placeholderFont

{

size?: Length,

weight?: number | FontWeight,

family?: string,

style?: FontStyle

}

-

设置placeholder文本样式:

  • size: 设置文本尺寸,Length为number类型时,使用fp单位。
  • weight: 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。
  • family: 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。
  • style: 设置文本的字体样式。

enterKeyType

EnterKeyType

EnterKeyType.Done

设置输入法回车键类型。

caretColor

Color

-

设置输入框光标颜色。

maxLength

number

-

设置文本的最大输入字符数。

  • EnterKeyType枚举说明

    名称

    描述

    Go

    显示Go文本。

    Search

    显示为搜索样式。

    Send

    显示为发送样式。

    Next

    显示为下一个样式。

    Done

    标准样式。

  • InputType枚举说明

    名称

    描述

    Normal

    基本输入模式。

    Password

    密码输入模式。

    Email

    e-mail地址输入模式。

    Number

    纯数字输入模式。

事件

名称

功能描述

onChange(value: string) => void

输入发生变化时,触发回调。

onSubmit(callback: (enterKey: EnterKeyType) => void)

回车键或者软键盘回车键触发该回调,参数为当前软键盘回车键类型。

onEditChanged(callback: (isEditing: boolean) => void)

输入状态变化时,触发回调。

示例

@Entry
@Component
struct TextInputTest {
    @State text: string = ''
    @State text1: string = ''
    @State text2: string = ''
    build() {
      Column() {
        TextInput({ placeholder: 'input your word' })
          .type(InputType.Normal)
          .placeholderColor(Color.Blue)
          .placeholderFont({ size: 40, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal })
          .enterKeyType(EnterKeyType.Next)
          .caretColor(Color.Green)
          .height(60)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontFamily("cursive")
          .fontStyle(FontStyle.Italic)
          .fontColor(Color.Red)
          .maxLength(20)
          .onChange((value: string) => {
            this.text = value
          })
          .onSubmit((enterKey) => {
            this.text1 = 'onSubmit'
          })
          .onEditChanged((isEditing) => {
            this.text2 = 'onEditChanged'
          })
          Text(this.text)
          Text(this.text1)
          Text(this.text2)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36