jQuery模拟手机数字键盘

// 点击弹出数字键盘
        document.getElementsByClassName("shuru")[0].onclick = function(e){
            e.stopPropagation()
            document.getElementsByClassName("layer-content")[0].classList.add("show")
        }

        // 点击页面隐藏数字键盘
        document.getElementsByClassName("wrap-content")[0].onclick = function(e){
            e.stopPropagation()
            document.getElementsByClassName("layer-content")[0].classList.remove("show")
        }  

        // 累加键盘数字
        var keyBtn = document.getElementsByClassName('num');
        for (var i = 0; i < keyBtn.length; i++) {
            keyBtn[i].onclick = function () {
                var oDiv = document.getElementById("div");
                 oDiv.innerHTML += this.innerHTML;
            }
        }

        // 键盘删除 退格
        document.getElementById('remove')[0].onclick = function(e){
            e.stopPropagation()
            var oDiv = document.getElementById("div");
            var oDivHtml = oDiv.innerHTML;
            oDiv.innerHTML = oDivHtml.substring(0, oDivHtml.length -1)
        }

.layer-content {
	position: fixed;
	left: 0;
	bottom: -3.4rem;
	width: 100%;
	height: auto;
	z-index: 1000;
	transition: bottom .3s linear;
}			

.layer-content.show{
	position:fixed;
	bottom:0;
	left: 0;
	z-index: 1000;
	transition: bottom .3s linear;
}

将jquery代码改为原生js, 移动端尽量不要引入jquery 。弹出键盘改为css3动画 ，不使用jquery动画。键盘弹出层使用fixed定位，不用absolute ,这样即使键盘隐藏状态也在页面底部看不到键盘占据得出空间

The Big Bird0
2018/8/22 9:38:22
赞赞赞！我就发现了position定位的问题，如果用absolute的话，苹果手机会有问题，用fixed就好了。

ヅ羽ぷ寒灬0
2017/10/19 9:34:50

获取div的inneHTML值

一开始没什么丝路，看了作者的demo就有想法了