鸿蒙通用组件Textinput简介_textinput内默认显示可编辑的文字内容

输入框组件----TextInput

TextInput设置默认文字和样式

TextInput({text:'文本输入'}) // 设置默认文字
  .width('80%') // 设置宽度
  .fontColor(Color.Red)  // 设置字体颜色
  .fontSize(30) // 设置字体大小
  .fontWeight(FontWeight.Bold) // 设置字体粗细
1
2
3
4
5

TextInput设置placeholder文字和样式

TextInput({placeholder:'请输入文本'}) // 设置placeholder文字
    .width('80%') // 设置宽度
    .placeholderColor(Color.Green) // 设置placeholder字体颜色
    .placeholderFont({size: 20,weight:FontWeight.Bold}) //  placeholder字体大小，粗细
1
2
3
4

TextInput支持的几种输入框类型

InputType.Password 密码输入框
InputType.PhoneNumber 手机号码输入框
InputType.Email 邮箱输入框
InputType.Number 数字输入框
InputType.Normal 一般文本输入框
1
2
3
4
5

TextInput设置光标颜色

.caretColor(Color.Red) // 设置光标颜色
1

TextInput获取焦点和失去焦点

.onFocus(()=>{
 console.log('获取聚焦')
})
.onBlur(()=>{
 console.log('失去聚焦')
})
1
2
3
4
5
6

TextInput设置输入框边框

.borderColor(Color.Red) // 设置边框颜色 
.borderStyle(BorderStyle.Dashed) // 设置边框类型
.borderWidth(1) // 设置边框线框

borderStyle的几种样式
BorderStyle.Dashed  线段
BorderStyle.Dotted 小点点
BorderStyle.Solid 实线
1
2
3
4
5
6
7
8

TextInput内容变化监听

   .onChange((text)=>{
     console.log(`输入内容:${text}`)
   })
1
2
3