说明
该组件从API Version 7 开始支持。
参数:
placeholder 设置无输入时的提示文本
text 设置输入框当前的文本内容
controller 设置TextInput控制器(从API Version 8开始支持)
属性:
type 设置输入框类型
InputType.Normal 正常
InputType.Number 纯数字
PhoneNumber 电话
Email 邮箱格式
Possword 密码格式输入
placeholderColor 设置placeholder文本颜色
placeholderFont 设置placeholder文本样式
enterKeyType 设置输入法回车键类型,目前仅支持默认型
caretColor 设置输入框光标颜色
maxLength 设置文本的最大输入字符数
inputFilter 正则表达式,目前仅支持单个字符的匹配(API Version 8 开始支持)
- value 设置正则表达式
- error 正则表达式失败时,返回被过滤的内容
copyOption 设置输入的文本是否可复制(API Version 9 开始支持)
showPasswordIcon 密码输入模式时,输入框末尾的图标是否显示。
style 设置输入框为默认风格或内联输入风格(API Version 9 开始支持)
TextInputStyle.default 选中文本与字体大小样式有关
TextInputStyle.inline 选中文本与输入框高度有关
textAlign 设置输入文本在输入框中的对齐方式(API Version 9 开始支持)
回调函数
onChange(输入内容发生变化)
onSubmit(按下回车键触发该回调)
onEditChanged(输入状态变化时,触发该回调)
onCopy 点击剪切板复制按钮 value: 复制的文本内容
onCut 点击剪切板剪切按钮 value: 剪切的文本内容
onPaste 点击剪切板粘贴按钮 value: 粘贴的文本内容
练习
@Entry
@Component
struct TextInput_Test{
private controller: TextInputController = new TextInputController()
@State account:string = ''
@State password:string = ''
build(){
Column({space: 10}){
TextInput({
placeholder: '账号',
text: '账号',
controller: this.controller
})
.type(InputType.Normal)
.margin({top: 20})
.width('90%')
.borderWidth(1)
.placeholderColor(Color.Blue)
.placeholderFont({size: 20})
.textAlign(TextAlign.Start)
.maxLength(11)
.caretColor(Color.Green)
.style(TextInputStyle.Default)
.copyOption(CopyOptions.InApp)
.inputFilter('a',(str) =>{
return str
})
.onChange((str) => {
this.account = str
})
TextInput({
placeholder: '密码',
text: '密码',
controller: this.controller
})
.type(InputType.Password)
.width('90%')
.borderWidth(1)
.placeholderColor('#f00')
.placeholderFont({size: 20})
.textAlign(TextAlign.Start)
.maxLength(11)
.showPasswordIcon(true)
.copyOption(CopyOptions.InApp)
.onChange((str) => {
this.password = str
})
Text(this.account)
.fontSize(20)
.fontColor(Color.Brown)
.width('100%')
.height(100)
Text(this.password)
.fontSize(20)
.fontColor(Color.Brown)
.width('100%')
.height(100)
}.alignItems(HorizontalAlign.Center)
.width('100%')
}
}