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

最新推荐文章于 2021-02-01 04:18:15 发布

weixin_34360651

最新推荐文章于 2021-02-01 04:18:15 发布

阅读量1k

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/u/259577/blog/626830

版权

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