uniapp h5中输入框输入时，会将内容顶上去的解决方案

问题描述： p1是正常的效果，p2是有问题的

 

产生的原因：输入框的高度高于键盘的高度时，就不会被顶上去反之就会（iphone中是这样，在安卓中好像不是）但是问题不大，解决方式如下

 

解决办法：1. 底部box设置 position: fixed; bottom: 0;

                  2. input框获取焦点时，设置底部box的bottom值以及input框所在的最外层box的高度 + 底部box的高度

                  3.  判断设备，如果是pc端打开就不走第二步了，否则就走

 关键代码如下

	

	

			
				取消
				确定
			
		



	.formBody {
		position: absolute;
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 96px);
		overflow-y: auto;
	}

	.bottomBox {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 96px;
		z-index: 999;
		background: #FFFFFF;
		box-shadow: inset 0px 1px 0px 0px rgba(25, 31, 37, 0.12);

	}

	.btnBox {
		margin-top: 8px;
		display: flex;
		align-items: center;
		padding: 0 32rpx;

		view {
			width: 334rpx;
			height: 44px;
			border-radius: 4px;
			border: 1px solid rgba(31, 31, 31, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
	}

					
				


	import { isOpenMode } from "../../../../../common/normal";


toTop() {
				let num = isOpenMode()
				if (num === 3 || num === 2) {
					return
				} else {
					const bottomBox = document.querySelector('.bottomBox');
					bottomBox.style.bottom = -100 + 'px';

					const formBody = document.querySelector('.formBody');
					formBody.style.height = "calc(100vh - var(--window-top) - var(--window-bottom))";
				}
			},

			toBeJust() {
				const bottomBox = document.querySelector('.bottomBox');
				bottomBox.style.bottom = 0;

				const formBody = document.querySelector('.formBody');
				formBody.style.height = "calc(100vh - var(--window-top) - var(--window-bottom) - 96px)";
			},

// normal.js

// 获取设备类型（app/pc等）
export function isOpenMode() {
	//平台、设备和操作系统
	var system = {
		win: false,
		mac: false,
		xll: false,
		ipad: false
	};
	//检测平台
	var p = navigator.platform;
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
	system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
	if (system.win || system.mac || system.xll || system.ipad) {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			// alert("在PC端微信上打开的");
			return 2;
		} else {
			// alert("在PC端非微信上打开的");
			return 3;
		}
	} else {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			// alert("在手机端微信上打开的");
			return 1;
		} else {
			// alert("在手机上非微信上打开的");
			return 4;
		}
	}
}

完整页面代码如下

 注意： 使用以上方法确实能解决键盘将底部栏顶上去的问题，但是在安卓手机中，用户点击了键盘内置的 确定按钮，鼠标并不会自动失去焦点，因此会存在键盘消失但是底部栏也消失的问题。

解决方法如下：

// 在mounted中监听键盘的打开和关闭事件
     mounted() {
            let windowHeight = 0; // 窗口高度
            uni.getSystemInfo({
                success: res => {
                    // alert(JSON.stringify(res))
                    // console.log(res)
                    windowHeight = res.windowHeight;  // 窗口高度（单位：px）
                }
            });

            const windowResizeCallback = (res) => {
                // alert(JSON.stringify(res.size.windowHeight))
                // console.log('变化后的窗口宽度=' + res.size.windowWidth)
                // console.log('变化后的窗口高度=' + res.size.windowHeight)
                if (res.size.windowHeight < windowHeight) {
                    // 键盘打开了
                    // alert('打开键盘')
                    this.toTop()
                } else {
                    // alert('关闭键盘')
                    this.toBeJust()
                }
            }
            uni.onWindowResize(windowResizeCallback)
        },

最新完整代码如下：

 对应的页面效果：

 

另一种解决办法是：输入框获取焦点时，隐藏导致页面被顶上去的box，然后失去焦点后再展示box，可以适当添加动画等