Text Input (TextInput/TextArea)

Note:

Currently in the beta phase.

TextInput and TextArea are input field components, typically used to respond to user input operations such as comment section inputs, chat box inputs, form inputs, etc. They can also be combined with other components to build functional pages, such as login/registration pages. For specific usage, please refer to TextInput and TextArea.

Creating Input Fields

TextInput is a single-line input field, while TextArea is a multi-line input field. They can be created using the following interfaces.

init(placeholder!: ?ResourceStr = None, text!: ?ResourceStr = None, controller!: ?TextInputController = None)

init(placeholder!: ?ResourceStr = None, text!: ?ResourceStr = None,controller!: ?TextAreaController = None)

• Single-line input field.

  TextInput()
  

  

• Multi-line input field.

  TextArea()
  

  

• Multi-line input field text will automatically wrap when it exceeds one line.

  TextArea(text: "I am TextArea I am TextArea I am TextArea I am TextArea" ).width(300)
  

  

Customizing Styles

• Setting placeholder text when there is no input.

  TextInput(placeholder: 'I am placeholder text')
  

  

• Setting the current text content of the input field.

  TextInput( placeholder: 'I am placeholder text', text: 'I am the current text content' )
  

  

• Adding backgroundColor to change the background color of the input field.

  TextInput( placeholder: 'I am placeholder text', text: 'I am the current text content' )
  .backgroundColor(0x4D0A59F7)
  

  

  More diverse styles can be achieved by combining Universal Attributes.

Selection Menu

When text in the input field is selected, a menu containing options like Cut, Copy, and Translate will appear.

TextInput:

TextInput( text: 'This is a piece of text to demonstrate the selection menu')

TextArea:

TextArea( text: 'This is a piece of text to demonstrate the selection menu')

Keyboard Avoidance

After the keyboard is raised, keyboard avoidance will only take effect for container components with scrolling capabilities during screen orientation changes. If you want keyboard avoidance to work for container components without scrolling capabilities, it is recommended to nest them within a container component that has scrolling capabilities, such as Scroll, List, or Grid.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    var placeHolderArr: Array<String> = ["1", "2", "3", "4", "5", "6", "7"];
    func build() {
        Scroll() {
            Column {
                ForEach(this.placeHolderArr, itemGeneratorFunc: {placeholder: String, _: Int64 =>
                TextInput( placeholder: 'TextInput ' + placeholder )
                .margin(30)}
                )
            }
        }
        .height(100.percent)
        .width(100.percent)
    }
}

Common Issues

How to Set the Minimum Display Lines for TextArea and Enable Adaptive Height

Problem Description

Set the initial height of TextArea to control the minimum number of text lines to display. When the input text exceeds the initial height, the TextArea height adapts automatically.

Solution

Set minLines, or set height to LengthMetrics.AUTO and use constraintSize to calculate the height yourself.

package ohos_app_cangjie_entry

import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    let textAreaPadding = 12.0
    let setMaxLines = 3.0
    let changeText = "Add TextArea \n"
    @State var fullText: String = this.changeText
    @State var originText: String = this.changeText

    func build() {
        Column() {
            TextArea(text: 'constraintSize: ' + this.fullText)
            .fontSize(18)
            .padding(this.textAreaPadding)
            .width(300)
            .height(LengthMetrics.AUTO)
            .constraintSize(
                // Calculate with padding, set to display at least this.setMaxLines lines of text.
                // If elderly-friendly font scaling is involved, need to listen and adjust height.
                minHeight: (this.textAreaPadding * 2.0 + this.setMaxLines * 21.0)
            )

            Blank(min: 50)
            Button("Input something")
            .onClick({ evt =>
                this.fullText += this.changeText
            })
        }
        .justifyContent(FlexAlign.Center)
        .width(100.percent)
        .padding(top: 30)
    }
}