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

fjcgreat 发布于2019-08-20 17:20 / 1926人阅读

摘要：当在移动端按钮底部固定定位后，当唤起键盘输入数据时就会出现很头疼的问题固定在底部的按钮会被系统自带的键盘挤上去，占用输入框位置如图怎么样才能让按钮固定底部，后面找到了两种方式。第二种需要了解通过方法触发事件，或规定当发生事件时运行的函数。

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

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

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

如图：

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

HTML

css

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

1.第一种

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

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

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

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

2.第二种

需要了解 resize()

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

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

运行后显示效果

唤起时：

取消时：

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

前端菜鸟，多多指教

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83509.html

(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后

摘要：问题概述问题移动端输入框键盘唤起后定位好的元素跟随页面滚动了起来属性失效了满屏任性横飞如下图问题有第三方输入法的机还会出现键盘弹出延迟，导致普通布局输入框等位置靠下的被键盘挡住如下图这个完成出来然后键盘再顶起完美解决方案在输入框获取焦点问题概述问题1：H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了！满屏任性横飞, 如下图:...

Simon 2019-08-21 14:15 评论0 收藏0
react 移动端兼容性问题和一些小细节

摘要：主要有两种方式和。的私有标签，顶端状态条的样式。禁止数字自动识别为电话号码，这个比较有用，因为一串数字在上会显示成蓝色，样式加成别的颜色也是不生效的。页面禁止复制选中文本 react 移动端兼容性问题和一些小细节使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些...

BingqiChen 2019-08-26 13:25 评论0 收藏0