uni-app adjustPan模式 web-view组件里面的input无法抬起页面

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app adjustPan模式 web-view组件里面的input无法抬起页面

操作步骤：

  • 场景是 web-view里面 input
  • 更改软键盘模式为
"softinput" : {
"mode" : "adjustPan"
},
  • 安卓无法顶起web-view

预期结果：

  • 抬起页面

实际结果：

  • 没有抬起

bug描述：

  • 场景是 web-view里面 input
  • 更改软键盘模式为
"softinput" : {
"mode" : "adjustPan"
},
  • 安卓无法顶起web-view

Harmonyos Next教程
15 回复

更新： webview中不能保证任何情况adjustPan模式都可以适配，安全一点的做法是配置为adjustResize
建议参考这个方案进行调整。

提供下单页面源码吧，我测试一下。你测试所有的安卓真机都不行，还是部分不可以？ios 真机正常吗


我测试下来我这边两个安卓机都不行 ios正常

而且开了adjustpan模式 键盘监听高度事件也监听不到

麻烦后期修复一下adjustPan模式适配，多谢~

我补一个附件

我使用小米 13 测试你给到 demo，在键盘收起的时候点击页面最后一个输入框，可以正常上推页面，展示键盘。我认为没问题，你录个视频说明吧。

取值相关文档 https://uniapp.dcloud.net.cn/component/input.html#关于软键盘弹出的逻辑说明

回复 DCloud_UNI_OttoJi: 你是没有改任何代码 直接打自定义基座跑的吗

回复 NightMing: 我是使用标准基座运行的。

录屏

我重新测试了几次，我发现我开启小米安全键盘的情况下。点击 demo 里的倒数第二个输入框，页面会正常上推。一旦用到了小米安全键盘，页面不会上推，你是这个原因吗？先找一下规律

回复 DCloud_UNI_OttoJi: 我是打的自定义基座 你这边可以尝试一下吗

回复 NightMing: 如之前我们沟通，标准基座无问题，我测试一下自定义基座。

回复 DCloud_UNI_OttoJi: 有结果麻烦回复一下 我这边确认一下是否是bug 还是我代码问题

在uni-app中，使用web-view组件嵌入网页时，确实可能会遇到一些与原生应用行为不一致的问题，特别是在处理输入焦点和页面滚动时。adjustPan模式通常用于移动Web应用中，以确保软键盘弹出时页面内容不会被遮挡。然而，在uni-app的web-view组件中，直接应用这种原生行为可能并不总是有效。

以下是一个可能的解决方案，通过JavaScript在嵌入的网页中手动调整页面内容，以确保在输入焦点改变时页面能正确滚动。这种方法不涉及uni-app的配置更改，而是依赖于嵌入网页内的JavaScript代码。

嵌入网页中的JavaScript代码示例

首先，确保你的web-view组件正确指向了嵌入的网页。然后，在嵌入的网页中添加以下JavaScript代码来处理软键盘弹出和收起时的页面调整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Input Focus</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #content {
            padding: 20px;
            height: calc(100% - 40px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
    <div id="content">
        <input type="text" placeholder="Focus me">
    </div>
    <script>
        window.addEventListener('focus', function(e) {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                document.body.style.height = 'calc(100% - 300px)'; // Adjust based on keyboard height
            }
        });

        window.addEventListener('blur', function(e) {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                setTimeout(() => {
                    document.body.style.height = '100%';
                }, 300); // Delay to match keyboard dismissal animation
            }
        });
    </script>
</body>
</html>

说明

  1. 页面布局：设置body和html的高度为100%，并禁用默认滚动条。
  2. 内容容器：创建一个内容容器#content，设置适当的内边距和高度，启用触摸滚动。
  3. 焦点事件监听：使用focus和blur事件监听输入框的焦点变化。当输入框获得焦点时，调整页面高度以适应软键盘；失去焦点时，恢复页面高度。
  4. 软键盘高度调整：根据软键盘的高度调整body的高度。这里假设软键盘高度为300px，实际使用中可能需要动态计算或调整。

请注意，这种方法依赖于软键盘弹出和收起时触发focus和blur事件的可靠性，以及软键盘高度的准确估计。在实际应用中，可能需要进一步调整以适应不同设备和浏览器。

回到顶部