LQ博客 www.lqblogs.com
arrows
nav

APP调用H5开发页面,输入框被软键盘遮挡问题的解决方案

作者:LQ 来源:原创 发布时间:2019-08-26 浏览量:984 评论:0 点赞:0

作者在记录本篇文章之前,也尝试去撸过网上提供的一些其他解决方案,但发现都不好使,于是,自己反复推敲自己的需求,最终找到一条还算可行的解决方案。同时,也借此机会分享给有需要的朋友,希望可以帮助到大家。


首先,提一下作者踩过的大坑,那就是使用resize监听窗口大小的做法,经尝试,发现软键盘弹出是,并不会触发这个监听事件。


另外一种,是可行的解决方案,那就是通过APP本身去处理这个问题,由APP向JS暴露软键盘展开或收缩的方法,H5通过这个暴露的方法判断软键盘的展开和收缩,从而对页面进行相应的渲染。这个方法虽然作者自己没有去尝试过,但应该是可行的。(这里的APP指Android和IOS)


还有一种解决方案,那就是作者自己总结出来的,具体看代码示例吧:


注意:样式要设置滚动属性且高度要大于当前屏幕高度,要不然scrollIntoView将无效
          input标签给点击事件和失去焦点事件

          (唯一美中不足的就是收起软键盘的时候,需要向下滑动或让input失去焦点才可以回到顶部)

<template>
    <div id="test" class="test">
        <!-- 测试案例 -->
       <input placeholder="请输入测试内容1">
       <input placeholder="请输入测试内容2">
       <input placeholder="请输入测试内容3">
       <input placeholder="请输入测试内容4">
       <input placeholder="请输入测试内容5">
       <input class="prevent-cover" placeholder="请输入测试内容6" @click="handleKeyboardCover(1)" @blur="handleKeyboardCover(2)">
    </div>
</template>
<script>
export default {
    name: "test",
    data(){
        return{
        }
    },
    methods: {
        //处理键盘覆盖
        handleKeyboardCover(type){
            if(type == 1){
                document.getElementsByClassName('prevent-cover')[0].scrollIntoView();
            }else{
                document.getElementById('test').scrollIntoView();
            }
        },           
    },
}
</script>

<style scoped>
  .test{
    height: 20rem;//120%
    overflow: auto;
    background: #ccc;
    margin: 0 auto;
    text-align: center;
    display: block;
  }
  .test input{
    width: 80%;
    height: 40px;
    padding: 0 5px;
    margin: 0 auto;
    border-radius: 5px;
    display: block;
    margin-top: 20px;
  }
</style>

结果图如下:(浏览器模拟视图)

image

image

APP H5 Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(0)
打赏
倒踩(0)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(984)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章