安卓端 uni-app nvue的input nvue里的web-view加载h5页面的input弹出的软键盘的mode adjustResize adjustPan怎么设置都无效

安卓端 uni-app nvue的input nvue里的web-view加载h5页面的input弹出的软键盘的mode adjustResize adjustPan怎么设置都无效

开发环境 版本号 项目创建方式
Windows 11 4.29 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 14

手机厂商：一加

手机机型：ace2

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

index.nvue的示例代码

<template>  
    <view class="yd-index">  
        <input class="yd-index-input" placeholder="nvue的顶部输入框"/>  
        <web-view class="yd-index-content" :webview-styles="webStyle" :src="webSrc"></web-view>  
        <input class="yd-index-input" placeholder="nvue的底部输入框"/>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                webSrc: '/hybrid/html/test/index.html',  
                webStyle: {  
                    progress: false  
                },  
            }  
        },  
        onLoad() {  
        },  
        methods: {  
        }  
    }  
</script>  
<style>  
    .yd-index {  
        flex: 1;  
        display: flex;  
        flex-direction: column;  
    }  
    .yd-index-content {  
        flex: 1;  
    }  
    .yd-index-input {  
        border: 1rpx solid #000000;  
        height: 100rpx;  
        border-radius: 10rpx;  
    }  
</style>

/hybrid/html/test/index.html的示例代码。

<!DOCTYPE html>  
<html lang=zh-CN>  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />  
        <title>error</title>  

        <style>  
            html,  
            body {  
                width: 100vw;  
                height: 100vh;  
                margin: 0;  
                padding: 0;  
                box-sizing: border-box;  
            }  
            .yd-test {  
                height: 100%;  
                width: 100%;  
                display: flex;  
                flex-direction: column;  
                border: 1px solid red;  
            }  
            .yd-test-input {  
                height: 30px;  
            }  
        </style>  

        <script>  
        </script>  
    </head>  
    <body>  
        <div class="yd-test">  
            <div>Webview的测试页面</div>  
            <input class="yd-test-input" placeholder="H5的顶部输入框"/>  
            <div style="flex: 1;"></div>  
            <input class="yd-test-input" placeholder="H5的底部输入框"/>  
        </div>  
    </body>  
</html>

更多关于安卓端 uni-app nvue的input nvue里的web-view加载h5页面的input弹出的软键盘的mode adjustResize adjustPan怎么设置都无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于安卓端 uni-app nvue的input nvue里的web-view加载h5页面的input弹出的软键盘的mode adjustResize adjustPan怎么设置都无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的nvue页面中，web-view内嵌H5页面的input软键盘问题确实存在一些限制。针对你描述的问题，以下是关键点分析：

  1. 在Android平台上，web-view组件实际上是原生WebView的封装，其键盘行为主要由系统WebView控制，不受外层nvue的input配置影响。

  2. 对于H5页面中的input，建议在H5页面本身通过以下方式处理：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  1. 可以尝试在H5页面添加JavaScript监听键盘事件：
window.addEventListener('resize', function() {
    if (document.activeElement.tagName === 'INPUT') {
        document.activeElement.scrollIntoView();
    }
});
  1. 对于nvue部分的input，可以尝试设置样式：
.yd-index-input {
    position: fixed;
    bottom: 0;
    width: 100%;
}
  1. 云端打包时，可以尝试在manifest.json中配置：
"app-plus": {
    "softinputMode": "adjustResize"
}
回到顶部