webapp開發系列之--教你純js獲取虛擬鍵盤的高度

時間 2019-11-24

標籤 webapp 開發系列獲取虛擬鍵盤高度欄目無線简体版

原文原文鏈接

<!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的差值就是虛擬鍵盤的高度。javascript