ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

melody_lql 发布于2019-08-01 18:26 / 1675人阅读

摘要：所以我也不用这种方式了。。监听失去焦点事件然后把的属性设置成。这样就好了。。。。总结来说就是触发虚拟键盘的时候把属性改成虚拟键盘消失的时候再把属性改回

首先看一下我要解决的问题，第一张图是正常的情况下，第二张图是点击了输入框之后的情况，就是要解决此问题~！

百度了一下解决方法，好像有以下的一些方法：

iscroll

Jquery Mobile

监听屏幕滚动事件给 #footer 赋值

由于本人新手，第1，2种的方法就没学过，所以暂时不用这2方法，来看第三种：监听屏幕滚动事件给 #footer 赋值

首先设置 #footer 的 position 的值为 absolute

然后用$(window).scroll() 来监听，再给 #footer 设置坐标( top 属性)

不过这方法我感觉有点不好，就是ios设备在拖动屏幕的时候，页面DOM的操作会被挂起，就是说你手指滚动屏幕的时候页面会定死，当你的手指离开了屏幕后，dom的操作才执行。所以我也不用这种方式了。。

下面说下我用的另类方式，

监听input输入框获取焦点事件 $().focus()

把屏幕滚动到底部 $window scroll to bottom

把 #footer 的 position 属性设置成 static (或者absolute)

这样 #footer 就会定位到最底部（但不是固定）为什么我要这么做呢？因为呢，移动设备弹出虚拟键盘的时候，页面可见的地方已经很少了，一般情况在输入的状态下是不会拖动屏幕的了，所以就采用这种方式。

监听 input 失去焦点事件 $().blur()

然后把 #footer 的 position 属性设置成 fixed。

这样就好了。。。。

总结来说就是触发虚拟键盘的时候把position属性改成static/absolute, 虚拟键盘消失的时候再把 position 属性改回 fixed.........

function sb_blur(){
             $("#order_summary").css({
             "position":"fiexd",
             "bottom":"0"
             })
    }
    function sb_focus(){
             $(window).scrollTop(0);
         $("#order_summary").css({
             "position":"relative"
             })
        }

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

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

ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

摘要：所以我也不用这种方式了。。监听失去焦点事件然后把的属性设置成。这样就好了。。。。总结来说就是触发虚拟键盘的时候把属性改成虚拟键盘消失的时候再把属性改回首先看一下我要解决的问题，第一张图是正常的情况下，第二张图是点击了输入框之后的情况，就是要解决此问题~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解决方...

jackzou 2019-06-28 18:20 评论0 收藏0
ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

摘要：所以我也不用这种方式了。。监听失去焦点事件然后把的属性设置成。这样就好了。。。。总结来说就是触发虚拟键盘的时候把属性改成虚拟键盘消失的时候再把属性改回首先看一下我要解决的问题，第一张图是正常的情况下，第二张图是点击了输入框之后的情况，就是要解决此问题~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解决方...

hosition 2019-08-29 14:17 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

xbynet 2019-08-01 15:58 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0