HarmonyOS開發(fā),TextInput組件獲取焦點的案例及代碼實現(xiàn)

以下是針對鴻蒙開發(fā)中你所提出的四種場景分別實現(xiàn)相應效果的代碼示例:

環(huán)境準備

確保你已經(jīng)安裝了 DevEco Studio 并且配置好了 HarmonyOS SDK 開發(fā)環(huán)境。

代碼實現(xiàn)

import { FocusController } from '@ohos.arkui.UIContext';

@Entry
@Component
struct FocusExample {
  private inputFocusControl: FocusController = new FocusController();

  build() {
    Column({ space: 50 }) {
      // 場景一:TextInput主動獲取焦點
      Column({ space: 10 }) {
        Text('場景一:TextInput主動獲取焦點')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第一個輸入框' })
          .width('90%')
          .focusable(true)
          .key("ABC")


        Button('讓第一個輸入框獲取焦點')
          .width('90%')
          .onClick(() => {
            this.inputFocusControl.requestFocus("ABC");
          })
      }

      // 場景二:頁面初次構(gòu)建完成時,使第二個TextInput獲取默認焦點
      Column({ space: 10 }) {
        Text('場景二:頁面初次構(gòu)建完成時,使第二個TextInput獲取默認焦點')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第二個輸入框' })
          .defaultFocus(true)// 頁面首次打開時,該TextInput獲取焦點
          .width('90%')
          .focusable(true)
      }

      // 場景三:頁面初次構(gòu)建完成時,使TextInput獲取焦點且不彈出鍵盤
      Column({ space: 10 }) {
        Text('場景三:頁面初次構(gòu)建完成時,使TextInput獲取焦點且不彈出鍵盤')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第三個輸入框' })
          .defaultFocus(true)// 頁面首次打開時,該TextInput獲取焦點
          .enableKeyboardOnFocus(false)// TextInput通過點擊以外的方式獲焦時,是否綁定輸入法。
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .caretColor(Color.Blue)
          .width('90%')
      }

      // 場景四:頁面初次構(gòu)建完成時,使TextInput不獲取焦點且不彈出鍵盤
      Column({ space: 10 }) {
        Text('場景四:頁面初次構(gòu)建完成時,使TextInput不獲取焦點且不彈出鍵盤')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)

        TextInput({ placeholder: '第四個輸入框' })
          .width('90%')
      }
    }
    .width('100%')
    .padding({ top: 50 })
  }
}

代碼解釋

場景一:TextInput主動獲取焦點

  • 點擊按鈕時,調(diào)用 requestFocus 方法可以主動讓焦點轉(zhuǎn)移至參數(shù)指定的組件上。

場景二:頁面初次構(gòu)建完成時,使第二個TextInput獲取默認焦點

  • TextInput 組件中設(shè)置 defaultFocus: true,這樣頁面創(chuàng)建后該輸入框會自動獲取焦點。

場景三:頁面初次構(gòu)建完成時,使TextInput獲取焦點且不彈出鍵盤

  • 設(shè)置 defaultFocus: true 使輸入框在頁面創(chuàng)建后獲取焦點。
  • 調(diào)用 enableKeyboardOnFocus(false) 方法,確保輸入框獲取焦點時不彈出鍵盤。

場景四:頁面初次構(gòu)建完成時,使TextInput不獲取焦點且不彈出鍵盤

  • TextInput 組件默認不會獲取焦點,也不會彈出鍵盤,所以不需要額外設(shè)置。

運行項目

將上述代碼復制到 DevEco Studio 中,點擊運行按鈕,選擇合適的模擬器或真機設(shè)備,即可看到四種場景的效果。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容