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

以下是針對(duì)鴻蒙開(kāi)發(fā)中你所提出的四種場(chǎng)景分別實(shí)現(xiàn)相應(yīng)效果的代碼示例:

環(huán)境準(zhǔn)備

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

代碼實(shí)現(xiàn)

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

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

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

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


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

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

        TextInput({ placeholder: '第二個(gè)輸入框' })
          .defaultFocus(true)// 頁(yè)面首次打開(kāi)時(shí),該TextInput獲取焦點(diǎn)
          .width('90%')
          .focusable(true)
      }

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

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

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

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

代碼解釋

場(chǎng)景一:TextInput主動(dòng)獲取焦點(diǎn)

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

場(chǎng)景二:頁(yè)面初次構(gòu)建完成時(shí),使第二個(gè)TextInput獲取默認(rèn)焦點(diǎn)

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

場(chǎng)景三:頁(yè)面初次構(gòu)建完成時(shí),使TextInput獲取焦點(diǎn)且不彈出鍵盤(pán)

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

場(chǎng)景四:頁(yè)面初次構(gòu)建完成時(shí),使TextInput不獲取焦點(diǎn)且不彈出鍵盤(pán)

  • TextInput 組件默認(rèn)不會(huì)獲取焦點(diǎn),也不會(huì)彈出鍵盤(pán),所以不需要額外設(shè)置。

運(yùn)行項(xiàng)目

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

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

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

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