H5，input输入时，软键盘弹起不能自动收回

最新推荐文章于 2023-01-12 16:26:52 发布

三人行，必有我师！！！

最新推荐文章于 2023-01-12 16:26:52 发布

阅读量4.3k

点赞数 1

分类专栏： H5 input 文章标签： H5 input

本文链接：https://blog.csdn.net/yangdl6/article/details/86291197

版权

H5 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

input

2 篇文章 0 订阅

订阅专栏

H5，input输入时，软键盘弹起不能自动收回（ios,安卓正常）

 //键盘收起以后页面缩回
    $(".form p input").on("blur",function(){
        var toFix=$(this).offset().top;
        window.scroll(0,toFix);//失焦后强制让页面归位
    });

之前没发现这个问题，这次做下载页，竟然发现这个问题，查询发现是由于微信改版造成的

此方法可以完美解决

<input @blur.prevent="inputLoseFocus" v-if="activityForm.name" v-model="publishForm.name" type="text" placeholder="姓名">

 // 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
    inputLoseFocus() {     
        setTimeout(() => {
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    },