问题出现的背景:

在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[], );
}

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/; if(top1<window_height){
if(top1<box_height/){
var top2 =top++box_height/
}else{
var top2 = window_height+(top+)/+box_height/
}
$(".tan_box").css("top", top2);
}else{
if(window_height-top1<box_height/){
var top2 = top--box_height/
}else{
var top2 = (top+)/+box_height/
} $(".tan_box").css("top", top2);
} })

author by:hgq  tuantuan

在IOS11中position:fixed弹出框中的input出现光标错位的问题的更多相关文章

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

    解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...

  2. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

  3. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. 弹出框中选项卡的运用(easyUI)

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  6. 弹出框中的AJAX分页

    $(function() { $("body").on("click",".set-topic",function(){ /*获取所有题目接 ...

  7. 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题

    问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...

  8. mvc 在弹出框中实现文件下载

    var myParent = parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent; ...

  9. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

随机推荐

  1. 02 Django框架基础(APP的创建访问)

    一.创建项目 1.命令:django-admin startproject sitename 2.IDLE环境:本质上都是执行上述命令 常用命令: python manage.py runserver ...

  2. PHP数组函数 array_multisort() ----对多个数组或多维数组进行排序

    PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...

  3. 15.Yii2.0框架where单表查询

    目录 新建控制器 HomeController.php 新建model article.php 新建控制器 HomeController.php D:\xampp\htdocs\yii\control ...

  4. 编译与安装 OpenSSL

    编译与安装 OpenSSL prefix 是安装目录,openssldir 是配置文件目录,另外建议安装两次,shared 作用是生成动态连接库.linux版的OpenSSL下载地址为:https:/ ...

  5. MySQL使用yum安装

    1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-comm ...

  6. 使用Blend的一些问题和技巧

    WPF开发,界面处理首选Blend,如果你开发了两年WPF都没接触过blend(当然这种几率不高),或者你刚接触WPF,可以考虑使用Blend,这货也算得上一个神器,上手也不难.以下有两位讲得不错,大 ...

  7. MongoDB学习-->Spring Data Mongodb-->MongodbTemplate

    配置文件application-dev.yml: server: port: 8888 mongo: host: localhost port: 27017 timeout: 60000 db: ma ...

  8. iOS 9下支持的键盘类型:

    http://blog.csdn.net/cloudox_/article/details/50532124

  9. python 获得列表中每个元素出现次数的最快方法

    import collections import numpy as np import random import time def list_to_dict(lst): dic = {} for ...

  10. 台州学院we are without brain 训练 计算几何

    A - View Angle Flatland has recently introduced a new type of an eye check for the driver's licence. ...