解决安卓手机在input获取焦点时候固定定位元素被输入键盘给顶到顶部

最新推荐文章于 2023-07-18 10:26:18 发布

weixin_30374009

最新推荐文章于 2023-07-18 10:26:18 发布

阅读量435

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ouyangyulin/p/7850975.html

版权

在做移动端的时候，很多底部固定的导航栏，目的是想让导航栏一直固定到底部，不随输入键盘的出现而移动。在苹果手机上没事，但在安卓手机上弹出的键盘会将按钮顶起来。事实是这样的：一个页面有input的时候，然后聚焦input的时候，输入键盘就出现了，原本固定在底部的导航栏也不是在最底部固定着了，而是在键盘上部。最初的解决方法是以为用input聚焦的时候，就把固定导航栏隐藏掉，失去焦点的时候就把固定导航栏显示。可是事实又告诉我，失败了。有些手机可能行，但是有些手机，键盘可以隐藏，但是不可以失去焦点。所以就想到了另一个方法，也就是可行的方法：

键盘弹出，改变了窗口的大小；

//大概的HTML代码
<body>
<section class="section1">
    <form>
        <input type="text" placeholder="请输入医生、或者门店关键字" class="keyName" id="serachData">
    </form>
    <img src="./images/Search.png" alt="">
</section>

<section class="section3">
    <div class="more">
        <div class="moreBtn">更多</div>
        <div class="myApoint"><a href="我的预约.html">我的预约</a></div>
    </div>
    <div class="loadMore">加载更多</div>
</section>
</body>

//jQuery代码
//让固定定位始终定在手机的同一个位置
//先定义一个变量，当改变窗口大小的时候用来做判断
           var flagKey=false;
             $(".keyName").on("focus",function () {
               flagKey=true;
             })
             window.onresize =function(){
             	if(flagKey){
             		$(".more").css("position","initial");
             		flagKey=false;
             	}else{
             		$(".more").css("position","fixed");
             		if(document.activeElement.id =="serachData"){
             			flagKey = true;
             		}
             	}
             };

转载于:https://www.cnblogs.com/ouyangyulin/p/7850975.html

weixin_30374009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决安卓手机在input获取焦点时候固定定位元素被输入键盘给顶到顶部

在做移动端的时候，很多底部固定的导航栏，目的是想让导航栏一直固定到底部，不随输入键盘的出现而移动。在苹果手机上没事，但在安卓手机上弹出的键盘会将按钮顶起来。事实是这样的：一个页面有input的时候，然后聚焦input的时候，输入键盘就出现了，原本固定在底部的导航栏也不是在最底部固定着了，而是在键盘上部。最初的解决方法是以为用input聚焦的时候，就把固定导航栏隐藏掉，失去焦点的时候就把固定导航栏显...
复制链接

扫一扫