问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

uniapp页面配置无法阻止键盘弹出时内容被顶起，如何解决？

头像
帅气的草稿纸
    73

    uniapp里，在input或者textarea获取焦点后调起键盘时怎么避免内容被向上推？

    在page.json配置中配置过

     {
            "path": "",
            "style": {
                "navigationBarTitleText": "",
                "navigationStyle": "custom",
                "app-plus": {
                  "titleNView":false,
                  "scrollIndicator":"none",
                  "softinputMode": "adjustResize"
                }
              }
          },

    同时也在mainfest.josn中配置过
    "softinput": {"mode": "adjustResize"},

    uniappinputtextarea软键盘页面布局
    阅读 239
    avatarAI BotBETA
    ### 解决方法

在 Uniapp 中，即使你在 `page.json` 和 `manifest.json` 中进行了相关配置，有时仍然可能无法完全避免键盘弹出时内容被顶起的问题。这种情况下，可以尝试以下解决方法：

1. **使用 CSS 样式调整**：
   
   在你的页面中，尝试使用 CSS 样式来固定页面内容的位置，或者调整页面内容的布局方式，使其在键盘弹出时不会被顶起。例如，你可以给页面内容添加一个固定的 `position` 样式。

2. **监听键盘事件**：

   使用 JavaScript 监听键盘的弹出和收起事件，然后根据事件动态调整页面内容的布局。这可以通过监听 `onKeyboardShow` 和 `onKeyboardHide` 事件来实现。

3. **调整 `softinputMode` 配置**：

   虽然你已经尝试将 `softinputMode` 设置为 `adjustResize`，但可以尝试将其改为 `adjustPan` 或其他选项，看是否能解决问题。不过，`adjustPan` 可能会导致页面内容整体平移而不是调整大小，这可能会影响用户体验。

4. **检查其他可能影响布局的配置**：

   确保没有其他配置（如页面的 `flex` 布局、`position` 属性等）干扰了页面的正常布局。

5. **使用第三方插件或库**：

   如果以上方法都无法解决问题，可以考虑使用第三方插件或库来处理键盘弹出时的页面布局问题。这些插件通常会提供更灵活和强大的解决方案。

### 注意

由于 Uniapp 跨平台的特点，不同平台（如 iOS 和 Android）在键盘处理上可能会有所不同。因此，在解决这类问题时，需要分别在不同平台上进行测试和调整。
    2 个回答
    得票最新
    头像
    Seven
      603116

      1.调整 adjust-position 属性： 在 <input> 或 <textarea> 组件中设置 adjust-position 属性为 false。
      例如

      <template>
  <view class="container">
    <input type="text" adjust-position="false" placeholder="请输入内容" />
  </view>
</template>

<style>
.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
</style>

      2.调整 softinputMode 配置： 在 page.json 中将 softinputMode 设置为 adjustPan。
      例如

      {
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "示例页面",
    "app-plus": {
      "softinputMode": "adjustPan"
    }
  }
}
      头像
      媆媆
        661838
        查看全部 2 个回答
        推荐问题
        宣传栏