问题出现的背景:

在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. Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)

    Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...

  2. 《linux设备驱动开发详解》笔记——14 linux网络设备驱动

    14.1 网络设备驱动结构 网络协议接口层:硬件无关,标准收发函数dev_queue_xmit()和netif_rx();  注意,netif_rx是将接收到的数据给上层,有时也在驱动收到数据以后调用 ...

  3. python爬虫基础14-selenium大全8/8-常见问题

    Selenium笔记(8)常见的坑 本文集链接:https://www.jianshu.com/nb/25338984 用Xpath查找数据时无法直接获取节点属性 通常在我们使用xpath时,可以使用 ...

  4. Ubuntu 档案权限

    Linux文件属性:查看指令是:ls -al ls是list的意思,重点在显示档案的文件名与相关属性.而选项-al则表示列出所有的档案详细的权限与属性.

  5. luogu2764 最小路径覆盖问题

    最小路径覆盖,看这里 #include <iostream> #include <cstring> #include <cstdio> #include <q ...

  6. python中os和sys模块

    os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口;sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. os 常用方法 os.rem ...

  7. day03_12 缩进介绍

    python比较变态,必须缩进,而C可以不缩进,世界上只有python这门语言要求必须缩进 tab键是缩进,shift+tab往左移动 SyntaxError:invalid syntax 语法错误 ...

  8. netcore命令行部署|跨域问题

    1.在hosting中修改发布端口号,如遇见不识别IP则改成*再用命令行运行 { "server.url": "http://*:8089"} 3.给接口开外网 ...

  9. 内存分配机制malloc&&alloca&&realloc

    <1>从静态存储区域分配.       内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量.<2>在栈上创建       在执 ...

  10. 骨牌覆盖问题总结!hihoCoder/ NYOJ-1273宣传墙1151

    本想着做一下第九届河南省省赛题,结果被这个类似骨牌覆盖的题卡住了,队友然我去hihoCoder上老老实实把骨牌覆盖一.二.三做完,这题就没什么问题了.虽然很不情愿,但还是去见识了一下.  骨牌覆盖问题 ...