单行文本输入框组件

2024-01-22 17:30 更新

单行文本输入框组件。

说明

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

子组件

接口

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

参数:

参数名

参数类型

必填

参数描述

placeholder

ResourceStr

设置无输入时的提示文本。

text

ResourceStr

设置输入框当前的文本内容。

设置输入框当前的文本内容。当组件设置stateStyles等刷新属性时,建议通过onChange事件将状态变量与文本实时绑定,避免组件刷新时TextArea中的文本内容异常。

controller8+

TextInputController

设置TextInput控制器。

属性

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

名称

参数类型

描述

type

InputType

设置输入框类型。

默认值:InputType.Normal

placeholderColor

ResourceColor

设置placeholder文本颜色。

placeholderFont

Font

设置placeholder文本样式。

enterKeyType

EnterKeyType

设置输入法回车键类型。

默认值:EnterKeyType.Done

caretColor

ResourceColor

设置输入框光标颜色。

maxLength

number

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

inputFilter8+

{

value: ResourceStr,

error?: (value: string) => void

}

正则表达式,匹配表达式的输入允许显示,不匹配的输入将被过滤。目前仅支持单个字符匹配,不支持字符串匹配。

- value:设置正则表达式。

- error:正则匹配失败时,返回被过滤的内容。

copyOption9+

CopyOptions

设置输入的文本是否可复制。

设置CopyOptions.None时,当前TextInput中的文字无法被复制或剪切,仅支持粘贴。

showPasswordIcon9+

boolean

密码输入模式时,输入框末尾的图标是否显示。

默认值:true

style9+

TextInputStyle

设置输入框为默认风格或内联输入风格。

默认值:TextInputStyle.Default

textAlign9+

TextAlign

设置输入文本在输入框中的对齐方式。

默认值:TextAlign.Start

说明

通用属性padding的默认值为:

{

top: 8 vp,

right: 16 vp,

bottom: 8 vp,

left: 16 vp

}

EnterKeyType枚举说明

名称

描述

Go

显示为开始样式。

Search

显示为搜索样式。

Send

显示为发送样式。

Next

显示为下一个样式。

Done

显示为换行样式。

InputType枚举说明

名称

描述

Normal

基本输入模式。

支持输入数字、字母、下划线、空格、特殊字符。

Password

密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。

Email

邮箱地址输入模式。支持数字,字母,下划线,以及@字符(只能存在一个@字符)。

Number

纯数字输入模式。

PhoneNumber9+

电话号码输入模式。

支持输入数字、+ 、-、*、#,长度不限。

TextInputStyle9+枚举说明

名称

描述

Default

默认风格,光标宽1.5vp,光标高度与文本选中底板高度和字体大小相关。

Inline

内联输入风格。文本选中底板高度与输入框高度相同。

内联输入是在有明显的编辑态/非编辑态的区分场景下使用,例如:文件列表视图中的重命名。

事件

除支持通用事件外,还支持以下事件:

名称

功能描述

onChange(callback: (value: string) => void)

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

value:输入的文本内容。

触发该事件的条件:

1、键盘输入。

2、粘贴、剪切。

3、键盘快捷键Ctrl+v。

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

按下输入法回车键触发该回调,返回值为当前输入法回车键的类型。

enterKeyType:输入法回车键类型。具体类型见EnterKeyType枚举说明。

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

输入状态变化时,触发该回调。从API Version8开始,建议使用onEditChange。

onEditChange(callback: (isEditing: boolean) => void)8+

输入状态变化时,触发该回调。isEditing为true表示正在输入。

onCopy(callback:(value: string) => void)8+

长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发该回调。

value:复制的文本内容。

onCut(callback:(value: string) => void)8+

长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发该回调。

value:剪切的文本内容。

onPaste(callback:(value: string) => void)8+

长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发该回调。

value:粘贴的文本内容。

TextInputController8+

TextInput组件的控制器。

导入对象

  1. controller: TextInputController = new TextInputController()

caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名

参数类型

必填

参数描述

value

number

从字符串开始到光标所在位置的字符长度。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextInputExample {
  5. @State text: string = ''
  6. controller: TextInputController = new TextInputController()
  7. build() {
  8. Column() {
  9. TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
  10. .placeholderColor(Color.Grey)
  11. .placeholderFont({ size: 14, weight: 400 })
  12. .caretColor(Color.Blue)
  13. .width(400)
  14. .height(40)
  15. .margin(20)
  16. .fontSize(14)
  17. .fontColor(Color.Black)
  18. .inputFilter('[a-z]', (e) => {
  19. console.log(JSON.stringify(e))
  20. })
  21. .onChange((value: string) => {
  22. this.text = value
  23. })
  24. Text(this.text)
  25. Button('Set caretPosition 1')
  26. .margin(15)
  27. .onClick(() => {
  28. // 将光标移动至第一个字符后
  29. this.controller.caretPosition(1)
  30. })
  31. // 密码输入框
  32. TextInput({ placeholder: 'input your password...' })
  33. .width(400)
  34. .height(40)
  35. .margin(20)
  36. .type(InputType.Password)
  37. .maxLength(9)
  38. .showPasswordIcon(true)
  39. // 内联风格输入框
  40. TextInput({ placeholder: 'inline style' })
  41. .width(400)
  42. .height(50)
  43. .margin(20)
  44. .borderRadius(0)
  45. .style(TextInputStyle.Inline)
  46. }.width('100%')
  47. }
  48. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号