欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 移动端input被输入法键盘挡住解决方法

程序员文章站 2024-03-25 08:43:40
...

解决方法:

1.先给最外层的div一个ID取名比如 id="apply"如下图:

vue 移动端input被输入法键盘挡住解决方法

2.定义一个class:

.focusState {position: absolute;}

3.利用监听键盘的收起展开事件来添加移除定义的focusState 样式

  created(){
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize = function() {
        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (clientHeight - nowClientHeight > 60 ) {//因为ios有自带的底部高度
            //键盘弹出的事件处理
            document.getElementById("apply").classList.add("focusState");
        }
        else {
            //键盘收起的事件处理
        	document.getElementById("apply").classList.remove("focusState");
        } 
    };
},

 完美解决~~~

相关标签: 兼容性