webapp开发系列之--教你纯js获取虚拟键盘的高度-优快云博客

本文介绍了一种通过监听浏览器窗口resize事件，计算虚拟键盘遮挡页面元素时页面高度变化的方法，进而实现页面布局的自适应调整，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
</head>
<body>
<script type="text/javascript">
		
    	var getVirtualKeyBoardHeightDiv = document.createElement("div");
    	
        getVirtualKeyBoardHeightDiv.innerHTML = '<div id="getVirtualKeyBoardHeightDiv" style="position: fixed; top:80%; bottom: 0; height: 12px; color: red;"></div>';
        
        document.body.appendChild(getVirtualKeyBoardHeightDiv);
        
        var getVirtualKeyBoardHeightDivOldOT = document.getElementById("getVirtualKeyBoardHeightDiv").offsetTop;
        
        window.onresize = function() {
        
        	var getVirtualKeyBoardHeightDivOT = document.getElementById("getVirtualKeyBoardHeightDiv").offsetTop;
        	
        	window.keyboardHeight = getVirtualKeyBoardHeightDivOT - getVirtualKeyBoardHeightDivOldOT;
        	
console.log(getVirtualKeyBoardHeightDivOldOT+"-"+getVirtualKeyBoardHeightDivOT+"="+Math.abs(keyboardHeight));
        }
</script>
</body>
</html>

思路：resize事件前后的置底dom元素的offsetTop的差值就是虚拟键盘的高度。

转载于:https://my.oschina.net/u/259577/blog/626830