首页 > 移动平台 > 详细

在IOS11中position:fixed弹出框中的input出现光标错位的问题

时间:2017-10-27 12:33:07      阅读:2982      评论:0      收藏:0      [点我收藏+]

标签:war   ios11   -i   oid   fun   兼容性   code   match   输入框   

问题出现的背景:

IOS11中position:fixed弹出框中的input出现光标错位的问题

技术分享

解决方案

一、设计交互方面最好不要让弹窗中出现input输入框;

二、前端处理此兼容性的方案思路:

1、判断手机机型:Android or ios    ios11 or ios其他   

/*ver 是IOS的版本,如果是Android  ver就不是数组*/
var
ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); if(Array.isArray(ver)){ ver = parseInt(ver[1], 10); }

2、判断弹出框出现的位置

a、点击事件后将包含input的弹出框position:fixed改成position:absolute

b、计算弹出框的位置,如果clickbutton在屏幕的一半的上方,让弹出框保持在屏幕的中上方,如果clickbutton在屏幕的一半的下方,让弹出框保持在屏幕的中下方

/*
#get_award  是clickbutton
.tan_box 是弹出框
*/
$("#get_award").click(function () {
    var top = $(this).position().top;/*点击按钮距离屏幕顶部的相对*/
    var scrollTop = $(document).scrollTop();/*滚动条的位置*/
    var window_height = $(window).height();/*屏幕的可视高度*/
    var box_height = $(".tan_box").height();/*弹框的高度*/
    
    top1 = top - scrollTop;
    window_height = window_height/2;

    if(top1<window_height){
        if(top1<box_height/2){
            var top2 =top+100+box_height/2
        }else{
            var top2 = window_height+(top+100)/2+box_height/2
        }
        $(".tan_box").css("top", top2);
    }else{
        if(window_height-top1<box_height/2){
            var top2 = top-100-box_height/2
        }else{
            var top2 = (top+100)/2+box_height/2
        }

        $(".tan_box").css("top", top2);
    }

})

author by:hgq  tuantuan 

在IOS11中position:fixed弹出框中的input出现光标错位的问题

标签:war   ios11   -i   oid   fun   兼容性   code   match   输入框   

原文:http://www.cnblogs.com/widgetbox/p/7742409.html

(1)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号