uniapp softinputmode 如何配置和使用

在uniapp开发中，softinputmode应该如何正确配置？我在manifest.json里设置了"app-plus": {“softinputMode”: “adjustResize”}，但安卓端键盘弹出时页面布局仍然被压缩。请问这个配置在不同平台（iOS/Android）下有什么区别？还有没有其他可选的mode值？如何实现键盘弹出时不挤压页面内容的效果？

2 回复

UniApp中通过manifest.json的app-plus节点配置softinputMode，常用值有"adjustResize"（页面顶起）和"adjustPan"（整体平移）。示例：

"app-plus": {
  "softinputMode": "adjustResize"
}

也可在页面通过uni.setSoftinputMode()动态调整。注意不同模式对布局的影响。


在 UniApp 中，softinputmode 用于配置软键盘（虚拟键盘）与页面的交互行为，主要影响输入框聚焦时页面的布局调整。以下是配置和使用方法：

配置方式

  1. 全局配置（在 pages.json 中）：

    {
  "globalStyle": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}

    适用于所有页面，确保键盘弹出时页面自动调整。

  2. 页面级配置（在 pages.json 的特定页面中）：

    {
  "path": "pages/index/index",
  "style": {
    "app-plus": {
      "softinputMode": "adjustPan"
    }
  }
}

    仅对指定页面生效，优先级高于全局配置。

常用模式说明

  • adjustResize：键盘弹出时，页面整体上推，底部内容不会被键盘遮挡（推荐用于表单页）。
  • adjustPan：键盘弹出时，页面整体平移，输入框会自动滚动到可视区域。
  • adjustNothing：键盘弹出不影响页面布局，可能导致输入框被遮挡。

使用注意事项

  • 平台差异：softinputmode 主要针对 App 端（iOS/Android），H5 和小程序通常有默认行为，无需额外配置。
  • 兼容性：在 app-plus 节点下配置，确保仅生效于 App 平台。
  • 动态调整：UniApp 暂不支持运行时动态修改该模式，需在配置文件中预设。

示例场景

若页面底部有固定按钮，建议使用 adjustResize 避免按钮被键盘覆盖：

{
  "path": "pages/submit/submit",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}

通过合理配置，可优化输入体验，避免布局错乱。

回到顶部