uni-app微信公众号H5项目使用uni-easyinput键盘弹出时没有上推页面

uni-app微信公众号H5项目使用uni-easyinput键盘弹出时没有上推页面

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX 
产品分类：uniapp/H5

<p class="content-inner-p">
    浏览器平台：
    <span>
        微信内置浏览器
    </span>
</p>

<p class="content-inner-p">
    浏览器版本：
    <span>
        8.0.38
    </span>
</p>

<p class="content-inner-p">
    App下载地址或H5网址：
    <a target="_blank" href="https://aichkj.cn/serve/#/">https://aichkj.cn/serve/#/</a>
</p>

### 示例代码：

```html
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                value: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 1000rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-bottom: 50rpx;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤：

  • 使用hbuilder新建vue2项目，在插件市场引入uni-easyinput到uni_modules，在首页进行使用

预期结果：

  • 键盘弹出时整体页面上移

实际结果：

  • 键盘弹出时整体页面没有上移，导致输入框被键盘遮挡

bug描述：

  • 使用hbuilder新建vue2项目，在插件市场引入uni-easyinput到uni_modules，在首页进行使用，当输入框聚焦时，键盘能够弹出，但是页面没有整体上推

更多关于uni-app微信公众号H5项目使用uni-easyinput键盘弹出时没有上推页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello ， h5 页面上是没这个操作的，你可以尝试监听键盘高度来改变输入框的位置

更多关于uni-app微信公众号H5项目使用uni-easyinput键盘弹出时没有上推页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的H5环境中，特别是微信内置浏览器，键盘弹出时页面未上推是常见问题。这通常由浏览器视口处理机制导致。

问题核心在于微信浏览器对focus事件的响应方式。当输入框获得焦点时，键盘弹出会压缩可视区域，但页面布局可能未相应调整。

解决方案：

  1. 使用window.resize事件监听键盘弹出：
mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    // 滚动到输入框位置
    const input = document.querySelector('.uni-easyinput__content-input')
    input?.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}
  1. 调整页面CSS：
.content {
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}
  1. 使用uni-app页面配置： 在pages.json中对应页面添加：
{
  "path": "pages/index/index",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}
  1. 针对uni-easyinput的特定处理：
<uni-easyinput 
  v-model="value" 
  placeholder="请输入内容"
  @focus="onInputFocus"
></uni-easyinput>

methods: {
  onInputFocus() {
    setTimeout(() => {
      const input = document.activeElement
      input?.scrollIntoView({ block: 'center' })
    }, 300)
  }
}
回到顶部