DEV Community

xiaoyaolihua
xiaoyaolihua

Posted on • Edited on

HarmonyOS NEXT-TextInput text input box notes

#harmonyos

​
The author encountered a lot of interesting things when using the TextInput text input box, today 2025/6/30, to make a record. Tell everyone about some strange problems and solutions.

1.TextInput, the text input box wants an underscore. Add a .showUnderline(true) attribute to him, and the text input box will be underlined, as shown in the following example:

 TextInput({ placeholder: 'Prompt text content' })
        .width(350)
        .showUnderline(true)
Enter fullscreen mode Exit fullscreen mode

The text input box is the same as the large white background. It's simple and beautiful, and the white looks very clean.

  1. Scene reproduction, the text input box above should be entered as a password, and if you want an eye style, how to achieve it? It's simple, just need us to add

.type(InputType.Password)
property, the sample code is as follows:

TextInput({ placeholder: 'Prompt text content' })
        .width(350)
        .showUnderline(true)
        .type(InputType.Password)
Enter fullscreen mode Exit fullscreen mode

Run the code, and find that although our text input box is the logic of the password input box, but the text input box has become gray, particularly ugly, and compared with our previous white, the style is not good-looking, so how do we modify it? It's actually very simple, just need to add

.backgroundColor($r('sys.color.comp_background_list_card'))
The property is good, and the sample code is as follows:

TextInput({ placeholder: 'Prompt text content' })
        .width(350)
        .showUnderline(true)
        .type(InputType.Password)
        .backgroundColor($r('sys.color.comp_background_list_card'))
Enter fullscreen mode Exit fullscreen mode

Expand:

1.The placeholder text of TextInput will automatically disappear when the user starts typing, and re-display it after the input box is cleared and loses focus, without additional code control

@local inputText: string = '';
TextInput({ placeholder: 'Enter text' })
.onChange((value) => this.inputText = value) // Real-time status updates

  1. There is an additional captcha input mode in the input box in API20 InputType.ONE_TIME_CODE, you can try it, which is very interesting.

  2. After setting maxLength, clicking on the input method again when the input reaches the upper limit will not trigger onChange.

So how do we solve this problem?

The sample code is as follows, (we need to prompt after 20 characters are exceeded, and then truncate the excess characters, and the maximum number of characters is 1 character overrun)

.maxLength(21) // Set the limit of 1 character exceeded
.onChange((value) => {
  if (value.length > 20) {
    promptAction.showToast({ message: 'The upper limit has been reached' }); // A pop-up prompt pops up
    this.inputText = value.substring(0, 20); // Truncate extra-long characters
  }
})
Enter fullscreen mode Exit fullscreen mode

4.onChange: Triggered when the input content changes (Note: It will not be triggered when the maxLength is exceeded)

We can implement bindings in onChange, or we can use the new V2 syntax!! , add after the variable to implement two-way binding, note that the variable must be a state variable

5.onSubmit: Triggered when the keyboard submit button is clicked, the custom keyboard needs to be bound to the enter key type through keyboardType

  1. Style customization: placeholderColor()/placeholderFont(): modify placeholder style 24. caretColor(): Sets the cursor color

  2. Inline mode and password mode do not display counters

By leveraging state management, event listening, and style customization, we can build an efficient input experience that conforms to HarmonyOS design specifications while avoiding anomalous behavior in boundary conditions.

​

Top comments (0)