The TextInput component is widely used for inputting single line text, such as application login account passwords, sending messages, etc.
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
placeholder： Set Prompt
text： Set Text
controller： Set TextInput controller
Set input type
.type(value: InputType)
InputType enumeration type:
InputType.Normal： Basic input mode. Supports inputting numbers, letters, underscores, spaces, and special characters.
InputType.Password： Password input mode.
InputType. Email: Email address input mode.
InputType.Number： Pure digital input mode.
Get input text
Set the onChange event to trigger a callback function when the input text changes.
.onChange(callback: EditableTextOnChangeCallback)
Code Example: TextInputPage
@Entry
@Component
struct TextInputPage {
@State message: string = 'TextInput Component';
@State phone:string='';
build() {
Column({space:6}) {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
TextInput({placeholder:'Please enter your account'})
TextInput({text:'Set initial value'})
TextInput({placeholder:'Please input a password'})
.type(InputType.Password)
TextInput({placeholder:'Please enter your phone number'})
.type(InputType.Number)
.onChange((value:string)=>{
this.phone=value
})
Text('The phone number is: '+this.phone)
}
.height('100%')
.width('100%')
}
}
Set the counter to display when the number of characters entered through InputCounterOptions exceeds the threshold.
showCounter(value: boolean, options?: InputCounterOptions)
When the parameter value is true, options can be set. The text box enables the counting index function, which needs to be used in conjunction with maxLength (setting the maximum character limit). The effect displayed by the character counter is the current number of input characters divided by the maximum number of input characters.
When the number of input characters is greater than the maximum number of characters multiplied by the percentage value, the character counter is displayed. If the user does not set InputCounterOptions when setting the counter, the border and counter index will turn red when the current input character count exceeds the maximum character count. The user sets both the parameter value to true and InputCounterOptions. When the thresholdPercentage value is within the valid range and the input character count exceeds the maximum character count, the border and counter index will turn red and the box will shake. If highlightBorder is set to false, the red border will not be displayed, the counter will default to red, and the frame will shake.
The character counter does not display in inline mode and password mode.
Code example: The counter function is implemented through the maxLength, showCounter, and showBaseline properties.
@Entry
@Component
struct TextInputPage2 {
@State text: string = '';
controller: TextInputController = new TextInputController();
build() {
Column() {
TextInput({ text: this.text, controller: this.controller })
.placeholderFont({ size: 16, weight: 400 })
.width(336)
.height(56)
.maxLength(6)
.showUnderline(true)
.showCounter(true,
//The display effect of the counter is the current number of characters input by the user divided by the maximum character limit. The maximum character limit is set through the maxLength() interface.
{ thresholdPercentage: 50, highlightBorder: true })
//If the user's current input character count reaches the maximum character limit multiplied by 50% (threshold percentage). The character counter displays.
//When the user sets highlightBorder to false, configure to remove the red border. When this parameter is not set, it defaults to true.
.onChange((value: string) => {
this.text = value;
})
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}