HarmonyOS鸿蒙Next中TextInput输入中点击空白处不自动收起

HarmonyOS鸿蒙Next中TextInput输入中点击空白处不自动收起 我的app中用到了TextInput作为手机号和密码输入框，发现输入手机号时点击空白处，软键盘不会自动收起，TextInput不会失去焦点，我写了个最小demo试了下，发现也是这样，请问这是textInput的特性，还是我的问题？

cke_3422.jpeg

代码：

@Entry
@Component
struct Index {


  build() {
    RelativeContainer() {
      TextInput({placeholder: 'Hello World'})
        .id('HelloWorld')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

      TextInput({placeholder: 'password'})
        .alignRules({
          top: { anchor: 'HelloWorld', align: VerticalAlign.Bottom },

        })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中TextInput输入中点击空白处不自动收起的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

收起键盘的条件，可以看参考《管理软键盘》

点击空白处收起键盘的案例，可以参考《TextInput组件获取焦点时，点击组件外区域如何收起软键盘问题》

欢迎点评这两篇文档

更多关于HarmonyOS鸿蒙Next中TextInput输入中点击空白处不自动收起的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是这样的！原因是你点击空白区域之后，焦点并没有转移，所以你会看到输入框内还有光标、软键盘也还在。除非你主动更改了焦点，例如：手动设置了其他组件可获焦.focusable(true)，然后你按了键盘Tab键将焦点转移到了其他非输入组件，软键盘才会落下。如果你只是想实现关闭软键盘效果，楼上的方法就可以。如果你想清除输入框内的焦点，可以给空白区域绑定onClick事件，事件内写入以下代码：

this.getUIContext().getFocusController().clearFocus();

另外由于焦点被清除，所以软键盘也会落下。

为了更好理解，也可以看一下焦点处理；

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

这是解决方案 https://developer.huawei.com/consumer/cn/doc/architecture-guides/shaking_to_dialog_1-ts_7-0000002263330706

是的

在HarmonyOS Next中，TextInput组件默认点击空白处不会自动收起软键盘。这是系统设计行为，旨在保持输入状态的连续性。若需实现点击空白处收起键盘，开发者需自行监听页面空白区域点击事件，并调用TextInput的blur()方法或控制其focusable属性来主动失去焦点。

在HarmonyOS Next中，TextInput组件默认不会在点击空白区域时自动失去焦点并收起软键盘。这是当前的设计行为，并非您代码的问题。

要实现点击空白处收起键盘的效果，您需要手动处理焦点。常见的解决方案是：

  1. 使用全局手势监听：在页面根容器（如Column或您使用的RelativeContainer）上添加onTouch事件。当触摸事件发生时，手动清除所有TextInput的焦点。

  2. 结合焦点控制器：为TextInput绑定focusControl，在页面触摸事件中调用控制器的clearFocus方法。

以下是一个修改后的示例代码框架：

import { FocusControl } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private focusControl: FocusControl = new FocusControl();

  build() {
    // 在根容器添加触摸事件
    RelativeContainer()
      .onTouch(() => {
        // 点击任意空白区域时清除焦点
        this.focusControl.clearFocus();
      })
    {
      TextInput({ placeholder: 'Hello World' })
        .id('HelloWorld')
        .focusControl(this.focusControl) // 绑定焦点控制器
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

      TextInput({ placeholder: 'password' })
        .focusControl(this.focusControl) // 绑定同一个控制器
        .alignRules({
          top: { anchor: 'HelloWorld', align: VerticalAlign.Bottom },
        })
    }
    .height('100%')
    .width('100%')
  }
}

关键点说明：

  • 多个TextInput可以共享同一个FocusControl实例来统一管理焦点。
  • onTouch事件会响应容器内的所有触摸操作，因此点击TextInput本身时也会触发。不过由于焦点操作是同步的，通常不会干扰正常的输入流程。
  • 此方法也适用于其他可获取焦点的组件。

如果您的页面布局复杂，需要注意onTouch事件可能会与子组件的触摸事件产生冲突，此时可能需要更精细的焦点管理策略。

回到顶部