uni-app <web-view>高页面的输入框在iOS平台上点击软键盘导航条“完成”后页面剧烈跳动
uni-app <web-view>高页面的输入框在iOS平台上点击软键盘导航条“完成”后页面剧烈跳动
操作步骤：
- 复现步骤见“bug描述”部分。
预期结果：
- 期望页面不会向上跳动，与Safari浏览器中表现的效果一致。
实际结果：
- 页面向上跳动，跳动幅度剧烈。
bug描述：
<web-view>页面的输入框嵌入html，在iOS平台上，点击软键盘上导航条的“完成”，页面向上跳动剧烈。
在浏览器中打开此html无此问题；尝试使用原生的WKWebView嵌入此html也没有此bug，uni-app的<web-view>有此bug。
复现步骤：
- 在HBuilderX3.8.12中使用uni-app默认模板新建项目（选Vue3.0）。
- 将附件中的index.html放到static文件夹中。
- 在pages/index/index.vue中的内容改为：
<template> <web-view src="/static/index.html"></web-view> </template> - 打包并在iOS手机平台的App上运行，然后点击首页的输入框。
- 然后点击软键盘上导航条的“完成”，发现页面会跳动很长的距离。
经测试，在iOS的Safari浏览器中打开此页面进行操作，不会出现任何问题（见下图）。
在使用 uni-app 的 <web-view> 组件时，如果在 iOS 平台上遇到点击软键盘导航条“完成”后页面剧烈跳动的问题，这通常是由于 iOS 的软键盘行为导致的。以下是一些可能的解决方案：
1. 使用 scrollIntoView 方法
在输入框失去焦点时，手动将页面滚动到合适的位置，以避免页面跳动。你可以在输入框的 blur 事件中调用 scrollIntoView 方法。
document.getElementById('inputId').addEventListener('blur', function() {
this.scrollIntoView({ behavior: 'smooth', block: 'center' });
});2. 使用 position: fixed 或 absolute
将输入框的父元素设置为 position: fixed 或 position: absolute，这样可以避免页面布局在软键盘弹出时发生变化。
.input-container {
position: fixed;
bottom: 0;
width: 100%;
}3. 监听 resize 事件
在 iOS 上，软键盘的弹出和收起会触发 resize 事件。你可以监听这个事件，并在事件触发时调整页面布局。
window.addEventListener('resize', function() {
// 调整页面布局
});4. 使用 input 事件代替 blur 事件
有时 blur 事件会导致页面跳动，可以尝试使用 input 事件来处理输入框的失焦逻辑。
document.getElementById('inputId').addEventListener('input', function() {
// 处理输入框失焦逻辑
});5. 使用 uni-app 的 pageScrollTo 方法
uni-app 提供了 pageScrollTo 方法，可以在页面滚动时使用，以避免页面跳动。
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});6. 使用 web-view 的 @message 事件
如果 web-view 中的页面与 uni-app 页面有交互，可以通过 @message 事件来传递消息，并在 uni-app 页面中处理页面跳动的逻辑。
<web-view src="https://example.com" @message="handleMessage"></web-view>methods: {
handleMessage(event) {
// 处理消息，调整页面布局
}
}7. 使用 viewport 元标签
确保在 web-view 中的页面正确设置了 viewport 元标签，以避免页面布局在软键盘弹出时发生变化。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">8. 使用 uni-app 的 input 组件
如果可能，考虑使用 uni-app 的原生 input 组件，而不是在 web-view 中使用 HTML 的 input 元素。uni-app 的原生组件通常能更好地处理软键盘的行为。
<input type="text" placeholder="请输入内容" />9. 使用 uni-app 的 focus 和 blur 事件
在 uni-app 中，你可以使用 focus 和 blur 事件来处理输入框的焦点变化，并在这些事件中调整页面布局。
<input type="text" @focus="handleFocus" @blur="handleBlur" />methods: {
handleFocus() {
// 处理输入框获取焦点逻辑
},
handleBlur() {
// 处理输入框失去焦点逻辑
}
}10. 使用 uni-app 的 page 生命周期
在 uni-app 的 page 生命周期中，你可以监听页面的显示和隐藏事件，并在这些事件中调整页面布局。
onShow() {
// 处理页面显示逻辑
},
onHide() {
// 处理页面隐藏逻辑
}