(vue)移动端点击输入框,弹出键盘

问题:vue项目中的手机端点击输入框,键盘弹出

一、 先在 data 中去定义记录高度的属性

data () {

    return {

        defaultHeight: '0',  //默认屏幕高度

        nowHeight:  '0',  //实时屏幕高度

    };

  },

二、 将 onresize 事件在 mounted 挂载一下

mounted() {

          //获取默认高度
           this.defaultHeight = $(window).height();

            window.onresize = () => {

            return (() => {

                //实时屏幕高度

                this.nowHeight =$(window).height();

            })();

            };

  },

三、:watch监听比较,判断键盘是否弹出,进行操作

nowHeight:function() {

              if(this.defaultHeight!= this.nowHeight){

                    //键盘弹出操作

                    setTimeout(()=>{

                        document.activeElement.scrollIntoView(false)//焦点所在元素移动到可视区域并位于底部,可选择顶部、居中

                         //底部若是被挡住可以向上滚动一定距离

                          let scrollTop=document.body.scrollTop

                        window.scrollTo(0, scrollTop+100);

                    },200)

                }else{

                        //键盘收起操作

                }

    }

    已经能解决键盘遮挡输入框问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用position:fixed,如果页面内容不是...
    rightmost阅读 26,579评论 22 11
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,728评论 1 11
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 975评论 0 2
  • 以后是对于初学者有帮助的一些JS的方法API,使用即说明 ■JS组成■1,ECMAScript : js的核心标准...
    简爱的三年阅读 927评论 0 0
  • 我不反对快节奏的生活。也不提倡慢悠悠的闲逛,只是这步伐同蜗牛一样,迈着脚步冲向终点……有人说蜗牛是懒惰的动物。我却...
    牧羊村的人阅读 740评论 0 0

友情链接更多精彩内容