HarmonyOS 鸿蒙Next TextInput自动获取焦点问题

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next TextInput自动获取焦点问题

页面上上下排列了一个TextInput和一个按钮,点击 按钮会使用CustomDialogController弹窗,关闭弹窗后,TextInput自动获取焦点····,怎么不让他自动获取焦点,设置了.defaultFocus(false) .groupDefaultFocus(false)都没用

2 回复
可以通过设置TextInput组件的focusable属性为不可获焦,就不会拉起系统默认的键盘

或者可以给TextInput添加enableKeyboardOnFocus(false)属性,禁用除点击以外的获焦

点击的时候可以重新设置获焦,属性重新设置为true

也可使用requestFocus 方式,下面是相关demo:

import prompt from '@ohos.prompt'

@Entry @Component struct Index {

@State message: string = ‘Hello World’; @State isboole:boolean=true;

build() { Row() { Column() { Text(this.message) .id(‘1sa’) .fontSize(50) .fontWeight(FontWeight.Bold)

    Button(<span class="hljs-string">'我会获取焦点'</span>)
      .key(<span class="hljs-string">'BBB'</span>)

    TextInput({ placeholder: <span class="hljs-string">'AAAAA'</span> })
      .id(<span class="hljs-string">'AAAA1'</span>)
      .type(InputType.Normal)

    Button(<span class="hljs-string">'点击焦点转移'</span>)
      .onClick(()=&gt;{
        <span class="hljs-keyword">let</span> res=focusControl.requestFocus(<span class="hljs-string">'BBB'</span>)
        <span class="hljs-keyword">if</span> (res) {
          prompt.showToast({message: <span class="hljs-string">'Request success'</span>})
        } <span class="hljs-keyword">else</span> {
          prompt.showToast({message: <span class="hljs-string">'Request failed'</span>})
        }
      })

    Button(<span class="hljs-string">'点击获取焦点'</span>)
      .onClick(()=&gt;{
        <span class="hljs-keyword">this</span>.isboole=<span class="hljs-literal">true</span>
        sendEventByKey(<span class="hljs-string">"AAAA1"</span>, <span class="hljs-number">10</span>, <span class="hljs-string">""</span>) <span class="hljs-comment">// 向id为"longClick"的组件发送点击事件</span>
      })
  }
  .width(<span class="hljs-string">'100%'</span>)
}
.height(<span class="hljs-string">'100%'</span>)

} }

使用 requestFocus 方法转移焦点

以下是参考demo:

import prompt from ‘@ohos.prompt’
import promptAction from ‘@ohos.promptAction’

let customDialogId: number = 0

@Builder function customDialogBuilder() { Column() { Text(‘Custom dialog Message’).fontSize(20) Row() { Button(“确认”).onClick(() => { promptAction.closeCustomDialog(customDialogId) })

  Blank()
    .width(<span class="hljs-number">50</span>)

  Button(<span class="hljs-string">"取消"</span>).onClick(() =&gt; {
    promptAction.closeCustomDialog(customDialogId)
    <span class="hljs-keyword">let</span> res=focusControl.requestFocus(<span class="hljs-string">'BBB'</span>)
    <span class="hljs-keyword">if</span> (res) {
      prompt.showToast({message: <span class="hljs-string">'Request success'</span>})
    } <span class="hljs-keyword">else</span> {
      prompt.showToast({message: <span class="hljs-string">'Request failed'</span>})
    }
  })
}
.padding(<span class="hljs-number">45</span>)

} .height(200).padding(35) }

@Entry @Component struct Index {

@State message: string = ‘Hello World’; @State isboole:boolean = true;

build() { Row() { Column() { Text(this.message) .id(‘1sa’) .fontSize(50) .fontWeight(FontWeight.Bold)

    Button(<span class="hljs-string">'我会获取焦点'</span>)
      .key(<span class="hljs-string">'BBB'</span>)

    TextInput({ placeholder: <span class="hljs-string">'AAAAA'</span> })
      .id(<span class="hljs-string">'AAAA1'</span>)
      .type(InputType.Normal)

    TextInput({ placeholder: <span class="hljs-string">'CCCCC'</span> })
      .id(<span class="hljs-string">'CCCCC'</span>)
      .type(InputType.Normal)

    Button(<span class="hljs-string">'点击出现弹窗'</span>)
      .onClick(()=&gt;{
        <span class="hljs-comment">// let res=focusControl.requestFocus('BBB')</span>
        <span class="hljs-comment">// if (res) {</span>
        <span class="hljs-comment">//  prompt.showToast({message: 'Request success'})</span>
        <span class="hljs-comment">// } else {</span>
        <span class="hljs-comment">//  prompt.showToast({message: 'Request failed'})</span>
        <span class="hljs-comment">// }</span>

        promptAction.openCustomDialog({
          builder: customDialogBuilder.bind(<span class="hljs-keyword">this</span>)
        }).then((dialogId: number) =&gt; {
          customDialogId = dialogId
        })
      })

    Button(<span class="hljs-string">'点击获取焦点'</span>)
      .onClick(()=&gt;{
        <span class="hljs-keyword">this</span>.isboole=<span class="hljs-literal">true</span>
        sendEventByKey(<span class="hljs-string">"AAAA1"</span>, <span class="hljs-number">10</span>, <span class="hljs-string">""</span>) <span class="hljs-comment">// 向id为"longClick"的组件发送点击事件</span>
      })
  }
  .width(<span class="hljs-string">'100%'</span>)

}
.height(<span class="hljs-string">'100%'</span>)

} }

针对HarmonyOS 鸿蒙Next TextInput自动获取焦点问题,以下是一些专业解答:

  1. 主动获取焦点

    • 可以通过调用focusControl.requestFocus接口,主动让焦点转移至指定的TextInput组件上。
  2. 页面初次构建时获取焦点

    • 设置defaultFocus属性为true,可以使TextInput在页面初次创建并进入时自动获取焦点。
  3. 焦点与键盘联动

    • 若不希望TextInput在获取焦点时弹出键盘,可以设置enableKeyboardOnFocusfalse
  4. 焦点事件监听

    • 使用onFocusonBlur回调来监听TextInput组件的获取焦点和失去焦点事件,以便进行进一步处理。
  5. 特殊场景处理

    • 若TextInput在自定义view中或受条件控制显示隐藏,可能需要主动控制焦点转移,确保在需要时组件能获取焦点。

HarmonyOS 鸿蒙Next 零基础入门高级项目实战https://www.itying.com/goods-1204.html

回到顶部