TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。
TextInput为单行输入框、TextArea为多行输入框
TextArea
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。
接口
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
参数：
placeholder 是占位符，ResourceStr (分为string字符串类型和Resource资源引用类型，引入系统资源或者应用资源中的字符串)
text是文本内容，也是ResourceStr类型的
controller 设置TextArea控制器，对于TextAreaController 类型，官方给出的解释
TextArea组件的控制器，目前可通过它设置TextArea组件的光标位置，调用caretPosition(value: number) 设置光标位置
属性
除支持通用属性外，还支持以下属性：
通用属性padding的默认值为：
{
top: 8 vp,
right: 16 vp,
bottom: 8 vp,
left: 16 vp
}
事件
除支持通用事件外，还支持以下事件：
案例
@Entry
@Component
struct Index {@State message: string = 'Hello World'@State value:string = "123"@State placeholder:string = "palceholder"@State text: string = ''controller: TextAreaController = new TextAreaController()build() {Row() {Column() {TextArea({placeholder: 'input your word...',controller: this.controller}).placeholderColor("#00FF00").placeholderFont({ size: 16, weight: 400 }).width(336).height(56).margin(20).fontSize(16).fontColor('#182431').backgroundColor('#FFFFFF').onChange((value: string) => {this.text = value})Text(this.text)Button('Set caretPosition 1').backgroundColor('#007DFF').margin(15).onClick(() => {// 设置光标位置到第一个字符后this.controller.caretPosition(10)})}.width('100%')}.height('100%')}
}TextInput
单行文本输入框组件
接口
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
参数
参数placeholder和text 与TextArea是一样的
controller是TextInputController （TextInput组件的控制器），同样可以设置输入光标的位置
属性
除支持通用属性外，还支持以下属性：
其中 EnterKeyType枚举说明
InputType枚举说明
TextInputStyle9+枚举说明
事件
除支持通用事件外，还支持以下事件：
案例
@Entry
@Component
struct TextInputExample {@State text: string = ''controller: TextInputController = new TextInputController()build() {Column() {TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }).placeholderColor(Color.Grey).placeholderFont({ size: 14, weight: 400 }).caretColor(Color.Blue).width(400).height(40).margin(20).fontSize(14).fontColor(Color.Black).inputFilter('[a-z]', (e) => {console.log(JSON.stringify(e))}).onChange((value: string) => {this.text = value})Text(this.text)Button('Set caretPosition 1').margin(15).onClick(() => {// 将光标移动至第一个字符后this.controller.caretPosition(1)})// 密码输入框TextInput({ placeholder: 'input your password...' }).width(400).height(40).margin(20).type(InputType.Password).maxLength(9).showPasswordIcon(true)// 内联风格输入框TextInput({ placeholder: 'inline style' }).width(400).height(50).margin(20).borderRadius(0).style(TextInputStyle.Inline)}.width('100%')}
}
