MiniX自绘渲染跨平台框架
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 组件通用信息

  • 基础组件

    • Blank
    • Button
    • Checkbox
    • CheckboxGroup
    • DataPanel
    • DatePicker
    • Divider
    • Gauge
    • Image
    • ImageAnimator
    • LoadingProgress
    • Marquee
    • Navigation
    • Progress
    • QRCode
    • Radio
    • Rating
    • RichText
    • ScrollBar
    • Search
    • Select
    • Slider
    • Span
    • Stepper
    • StepperItem
    • Text
    • TextArea
    • TextClock
    • TextInput
      • 子组件
      • 接口
      • 属性
      • EnterKeyType枚举说明
      • InputType枚举说明
      • 事件
      • TextInputController
      • 示例
    • TextPicker
    • TextTimer
    • TimePicker
    • Toggle
    • Web
    • XComponent
  • 容器组件

  • 媒体组件

  • 绘制组件

  • 画布组件

  • 动画

  • 全局 UI 方法

  • 文档中涉及到的内置枚举值
  • 类型定义

# TextInput

提供单行文本输入组件。

说明:

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

# 子组件

无

# 接口

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

参数:

参数名 参数类型 必填 参数描述
placeholder ResourceStr 否 无输入时的提示文本。
text ResourceStr 否 设置输入框当前的文本内容。
controller8+ TextInputController 否 设置TextInput控制器。

# 属性

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

名称 参数类型 描述
type InputType 设置输入框类型。
默认值:InputType.Normal
placeholderColor ResourceColor 设置placeholder颜色。
placeholderFont Font 设置placeholder文本样式:
- size: 设置文本尺寸,Length为number类型时,使用fp单位。
- weight: 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。
- family: 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。
- style: 设置文本的字体样式。
enterKeyType EnterKeyType 设置输入法回车键类型。
默认值:EnterKeyType.Done
caretColor ResourceColor 设置输入框光标颜色。
maxLength number 设置文本的最大输入字符数。
inputFilter8+ {
value: ResourceStr8+,
error?: (value: string) => void
}
正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。
- value:设置正则表达式。
- error:正则匹配失败时,返回被忽略的内容。

# EnterKeyType枚举说明

名称 描述
Go 显示Go文本。
Search 显示为搜索样式。
Send 显示为发送样式。
Next 显示为下一个样式。
Done 标准样式。

# InputType枚举说明

名称 描述
Normal 基本输入模式。
Password 密码输入模式。
Email e-mail地址输入模式。
Number 纯数字输入模式。

# 事件

名称 功能描述
onChange(callback: (value: string) => void) 输入发生变化时,触发回调。
onSubmit(callback: (enterKey: EnterKeyType) => void) 回车键或者软键盘回车键触发该回调,参数为当前软键盘回车键类型。
onEditChanged(callback: (isEditing: boolean) => void)(deprecated) 输入状态变化时,触发回调。
onEditChange(callback: (isEditing: boolean) => void) 8+ 输入状态变化时,触发回调。
onCopy8+(callback:(value: string) => void) 长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发回调。
value:复制的文本内容。
onCut8+(callback:(value: string) => void) 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发回调。
value:剪切的文本内容。
onPaste8+(callback:(value: string) => void) 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发回调。
value:粘贴的文本内容。

# TextInputController8+

TextInput组件的控制器。

# 导入对象

controller: TextInputController = new TextInputController()
1

# caretPosition

caretPosition(value: number): void

设置光标移动到指定位置。

参数:

参数名 参数类型 必填 参数描述
value number 是 设置输入光标的位置。
value:从字符串开始到光标所在位置的字符长度。

# 示例

# 单行文本输入

// xxx.ets
@Entry
@Component
struct TextInputExample1 {
  @State text: string = ''

  build() {
    Column() {
      TextInput({ placeholder: 'input your word' })
        .placeholderColor("rgb(0,0,225)")
        .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
        .caretColor(Color.Blue)
        .height(50)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontFamily("sans-serif")
        .fontStyle(FontStyle.Normal)
        .fontColor(Color.Red)
        .onChange((value: string) => {
          this.text = value
        })
      Text(this.text).width('90%')
    }
  }
}
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

zh-cn_image_0000001252769643

# 设置光标

// xxx.ets
@Entry
@Component
struct TextInputExample2 {
    @State text: string = ''
    controller: TextInputController = new TextInputController()
    build() {
        Column() {
            TextInput({ placeholder: 'Please input your words.', controller:this.controller})
            Button('caretPosition')
                .onClick(() => {
                this.controller.caretPosition(4)
            })
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

zh-cn_image_0000001208256092