移动端唤起键盘时取消position:fixed定位


当在移动端按钮position:fixed;底部bottom:0;

固定定位后,当唤起键盘输入数据时就会出现很头疼的问题:

固定在底部的按钮会被系统自带的键盘挤上去,占用输入框位置;

如图:

移动端唤起键盘时取消position:fixed定位

怎么样才能让按钮固定底部,后面找到了两种方式。

HTML

<div class="submit">
     <button type="button" class="btn">提交信息</button>
</div>

css

.submit {
    display: flex;
    width: 100%;
    justify-content: center;
    position: fixed;
    bottom: 0;
}

1.第一种

通过输入框input获取焦点/移除焦点 来控制按钮的position样式;

js

$("input,textarea").focus(function(){
      $(".submit").css("position","static");
}).blur(function(){
   $(".submit").css("position","fixed");            
});

效果是实现了,但是后面发现一个问题,如图:

移动端唤起键盘时取消position:fixed定位

会发现按键没有显示完整。

2.第二种

需要了解 resize()

通过resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。

js

var windheight = $(window).height();  /*未唤起键盘时当前窗口高度*/
        
$(window).resize(function(){
   var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/        
   if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
      $(".submit").css("position","static");
   }else{
      $(".submit").css("position","fixed");
   }           
});

运行后显示效果

唤起时:

移动端唤起键盘时取消position:fixed定位

取消时:

移动端唤起键盘时取消position:fixed定位

这样就完美解决了类似键盘问题,当然这种方式也可以运用到其他场景当中。

前端菜鸟,多多指教


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>