HarmonyOS鸿蒙Next中输入框输入后点击其他空白区域如何收起键盘

HarmonyOS鸿蒙Next中输入框输入后点击其他空白区域如何收起键盘 输入框输入后点击其他空白区域如何收起键盘

6 回复

非输入框区域收起软键盘使用stopInputSession结束输入会话

.onTouch(() => {
 // 收起键盘
 let inputMethodController = inputMethod.getController();
 inputMethodController.stopInputSession()
}

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inputmethod-V5#stopinputsession9

更多关于HarmonyOS鸿蒙Next中输入框输入后点击其他空白区域如何收起键盘的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


.onClick(() => {
  this.getUIContext().getFocusController().clearFocus();
})

在根组件加这个就行了。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

大佬  键盘输入完怎么自动聚焦的？我用focusControl.requestFocus有bug

在HarmonyOS鸿蒙Next中，当输入框输入完成后，点击其他空白区域收起键盘可以通过以下方式实现：

  1. 使用onBlur事件：在输入框组件中监听onBlur事件，当输入框失去焦点时自动收起键盘。例如：

    <TextInput
  onBlur={() => {
    // 收起键盘的逻辑
  }}
/>

  2. 使用TouchableWithoutFeedback组件：在页面布局的最外层包裹一个TouchableWithoutFeedback组件，并监听onPress事件，当点击空白区域时调用Keyboard.dismiss()方法收起键盘。例如：

    import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  <View>
    {/* 页面内容 */}
    <TextInput />
  </View>
</TouchableWithoutFeedback>

  3. 使用ScrollView组件：如果页面包含可滚动内容，可以使用ScrollView组件，并设置keyboardDismissMode属性为on-drag，在用户拖动页面时自动收起键盘。例如：

    import { ScrollView, TextInput } from 'react-native';

<ScrollView keyboardDismissMode="on-drag">
  <TextInput />
</ScrollView>

这些方法可以帮助在HarmonyOS鸿蒙Next中实现点击空白区域收起键盘的功能。

在HarmonyOS鸿蒙Next中，点击输入框外的空白区域无法自动收起键盘。你需要通过编程实现这一功能，通常是在页面的根布局上设置点击事件监听器，当检测到点击事件时，调用输入框的clearFocus()方法或InputMethodManager的hideSoftInputFromWindow()方法来隐藏键盘。这样可以确保点击空白区域时键盘能够收起，提升用户体验。

回到顶部