テキスト入力コンポーネントの基本

HarmonyOS開発におけるTextInputとTextAreaは、ユーザーからの入力を受け付けるための主要なUIコンポーネントです。これらはコメント入力、チャット機能、フォーム入力など多様な場面で使用され、ログインページや登録フォームのような複合的な機能ページを構築する際にも活用されます。

入力ボックスの作成

TextInputは単一行入力用、TextAreaは複数行入力用のコンポーネントです。以下のインターフェースを使用して作成します。

TextInput(value?: { placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController })

TextArea(value?: { placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController })

単一行入力ボックス

TextInput()

複数行入力ボックス

TextArea()

複数行入力ボックスでは、テキストが一行を超える場合に自動的に折り返しが行われます。

TextArea({ text: "このTextAreaコンポーネントは長いテキストを自動で折り返します。" }).width(300)

入力タイプの設定

TextInputには9種類の入力タイプが用意されており、それぞれ異なる入力モードを提供します。typeプロパティを使用して設定します。

基本入力モード（デフォルト）

TextInput()
  .type(InputType.Normal)

パスワード入力モード

TextInput()
  .type(InputType.Password)

メールアドレス入力モード

TextInput()
  .type(InputType.Email)

数値入力モード

TextInput()
  .type(InputType.Number)

スタイルのカスタマイズ

入力ボックスの外見と動作をカスタマイズする方法です。

プレースホルダーテキストの設定

TextInput({ placeholder: 'ここに入力してください' })

初期テキストの設定

TextInput({ placeholder: 'プレースホルダー', text: '初期テキスト' })

背景色の変更

TextInput({ placeholder: 'プレースホルダー', text: 'テキスト' })
  .backgroundColor(Color.Blue)

イベント処理

入力コンポーネントにイベントを追加して、ユーザーの操作に応じた処理を実装します。

TextInput()
  .onChange((value: string) => {
    console.log('入力値:', value);
  })
  .onFocus(() => {
    console.log('入力フィールドがフォーカスされました');
  })
  .onBlur(() => {
    console.log('入力フィールドがフォーカスを失いました');
  })

実践的な例：ユーザー認証フォーム

ログインフォームでのTextInputとTextAreaの使用例です。

@Entry
@Component
struct LoginForm {
  @State username: string = '';
  @State password: string = '';
  
  build() {
    Column() {
      Text('ユーザーログイン').fontSize(20).margin({ bottom: 20 })
      
      TextInput({ placeholder: 'ユーザー名を入力' })
        .onChange((value) => {
          this.username = value;
        })
        .margin({ bottom: 15 })
      
      TextInput({ placeholder: 'パスワードを入力' })
        .type(InputType.Password)
        .onChange((value) => {
          this.password = value;
        })
        .margin({ bottom: 20 })
      
      Button('ログイン')
        .onClick(() => {
          if (this.username && this.password) {
            console.log('ログイン情報:', this.username, this.password);
          }
        })
        .width(200)
    }
    .padding(20)
    .width('100%')
  }
}

キーボード回避機能

キーボードが表示された際にUI要素が隠れないようにするためのキーボード回避機能について説明します。

スクロール可能なコンテナ（Scroll、List、Gridなど）内にTextInputを配置することで、キーボード表示時に自動的にスクロールして入力フィールドを表示できます。

@Entry
@Component
struct KeyboardAvoidanceExample {
  @State inputText: string = '';
  private placeholders: string[] = ['アイテム1', 'アイテム2', 'アイテム3', 'アイテム4', 'アイテム5'];
  
  build() {
    Scroll() {
      Column() {
        ForEach(this.placeholders, (item: string) => {
          TextInput({ placeholder: `入力フィールド ${item}` })
            .margin({ top: 15, bottom: 15 })
            .onChange((value) => {
              this.inputText = value;
            })
        })
        
        Text(`現在の入力: ${this.inputText}`)
          .margin({ top: 20 })
          .padding(10)
          .backgroundColor(Color.Gray)
      }
    }
    .height('100%')
    .width('100%')
  }
}