脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。-脚本宝典
百度了一下解决方法,好像有以下的一些方法:

  1. iscroll
  2. Jquery Mobile
  3. 监听屏幕滚动事件给 #footer 赋值

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

  1. 首先设置 #footer 的 position 的值为 absolute
  2. 然后用$(window).scroll() 来监听,再给 #footer 设置坐标( top 属性)

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

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

  1. 监听input输入框获取焦点事件 $().focus()
  2. 把屏幕滚动到底部 $window scroll to bottom
  3. 把 #footer 的 position 属性设置成 static (或者absolute)

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

  1. 监听 input 失去焦点事件 $().blur()
  2. 然后把 #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"
             })
        } 

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过