码迷,mamicode.com
首页 > 移动开发 > 详细

IOS的一些坑

时间:2016-08-11 11:25:23      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

1.解决IOS safari在input focus弹出输入法时不支持position fixed的问题
 
$(‘input‘).focus(function(){
        var _this = this;

        //无键盘时输入框到浏览器窗口顶部距离
        var noInputViewHeight = $(window).height() - $(_this).height();

        //网页正文内容高度
        var contentHeight = $(document).height() - $(_this).height();

        //控制正文内容高度大于一屏,保证输入框固定底部
        contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

        //因为弹出输入法需要时间,需延时处理
        setTimeout(function(){

                //弹出输入法时滚动条的起始滚动距离
                var startScrollY = $(window).scrollTop();

                //弹出输入法时输入框到窗口顶部的距离,即到软键盘顶部的起始距离
                var inputTopHeight = $(_this).offset().top - startScrollY;

                //弹出输入法时输入框预期位置,即紧贴软键盘时的位置。因输入框此时处于居中状态,所以其到窗口顶部距离即为需往下移动的距离。
                var inputTopPos = $(_this).offset().top + inputTopHeight;

                //控制div不超出正文范围
                inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

                //设置输入框位置使其紧贴输入框
                $(_this).css({‘position‘:‘absolute‘, ‘top‘:inputTopPos });

                //给窗口对象绑定滚动事件,保证页面滚动时div能吸附软键盘
                $(window).bind(‘scroll‘, function(){

                        //表示此时有软键盘存在,输入框浮在页面上了
                        if (inputTopHeight != noInputViewHeight) {

                                //页面滑动后,输入框需跟随移动的距离
                                var offset = $(this).scrollTop() - startScrollY;

                                //输入框移动后位置
                                afterScrollTopPos = inputTopPos + offset;

                                //设置输入框位置使其紧贴输入框
                                $(_this).css({‘position‘:‘absolute‘, ‘top‘:afterScrollTopPos });
                        }
                });
        }, 100);
}).blur(function(){//输入框失焦后还原初始状态
        $(".div-input").removeAttr(‘style‘);
        $(window).unbind(‘scroll‘);
});
 
 
2.解决input 和 a 标签点击时出现透明灰色框
 
-webkit-tap-highlight-color:rgba(255,255,255,0);
        -webkit-appearance: none;
3.解决IOS 数字带下划线
<meta name="format-detection" content="telephone=no" />

IOS的一些坑

标签:

原文地址:http://www.cnblogs.com/xuhaiying/p/5760173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!