zoukankan      html  css  js  c++  java
  • 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 就会定位到最底部(但不是固定) 为什么我要这么做呢? 因为呢,移动设备弹出虚拟键盘的时候,页面可见的地方已经很少了,一般情况在输入的状态下是不会拖动屏幕的了,所以就采用这种方式。

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

    5.  然后把 #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"
                 })
    }    

     

  • 相关阅读:
    1041. 困于环中的机器人
    95. 不同的二叉搜索树 II
    LeetCode945:使数组唯一的最小增量
    LeetCode:925.长按键入
    LeetCode:926. 将字符串翻转到单调递增
    InteliJ 安装PlantUML插件
    CodeBlock换肤
    正则表达式验证手机号和座机号
    C#中使用反射遍历一个对象属性和值以及百分数
    c#中@的用法
  • 原文地址:https://www.cnblogs.com/wt645631686/p/6867666.html
Copyright © 2011-2022 走看看