uniapp如何隐藏软键盘

在uniapp开发中，如何实现点击页面空白区域时自动隐藏软键盘？我试过blur方法但有时不生效，有没有更可靠的解决方案？

2 回复

在输入框失去焦点时调用 uni.hideKeyboard() 即可隐藏软键盘。


在 UniApp 中，可以通过调用 uni.hideKeyboard() 方法来隐藏软键盘。这个方法适用于输入框失去焦点或用户完成输入后关闭键盘的场景。

示例代码：

// 在需要隐藏软键盘的地方调用
uni.hideKeyboard();

注意事项：

  1. 确保在用户交互（如点击按钮）或输入完成后调用，以避免影响用户体验。
  2. 如果页面中有多个输入框，建议在提交表单或切换输入框时调用。

完整示例（结合输入框和按钮）：

<template>
  <view>
    <input v-model="inputValue" placeholder="请输入内容" />
    <button @click="hideKeyboard">隐藏键盘</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    hideKeyboard() {
      uni.hideKeyboard(); // 隐藏软键盘
    }
  }
};
</script>

如果遇到问题，检查 UniApp 版本是否支持此 API，或尝试通过输入框失焦（如 blur 事件）自动触发隐藏。

回到顶部