在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景:
在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);
} })
在IOS11中position:fixed弹出框中的input出现光标错位的问题的更多相关文章
- IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
- 苹果手机iOS11中fixed弹出框中input光标错位问题
最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- 弹出框中选项卡的运用(easyUI)
先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...
- 弹出框中的AJAX分页
$(function() { $("body").on("click",".set-topic",function(){ /*获取所有题目接 ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- mvc 在弹出框中实现文件下载
var myParent = parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent; ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
随机推荐
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- 《linux设备驱动开发详解》笔记——14 linux网络设备驱动
14.1 网络设备驱动结构 网络协议接口层:硬件无关,标准收发函数dev_queue_xmit()和netif_rx(); 注意,netif_rx是将接收到的数据给上层,有时也在驱动收到数据以后调用 ...
- python爬虫基础14-selenium大全8/8-常见问题
Selenium笔记(8)常见的坑 本文集链接:https://www.jianshu.com/nb/25338984 用Xpath查找数据时无法直接获取节点属性 通常在我们使用xpath时,可以使用 ...
- Ubuntu 档案权限
Linux文件属性:查看指令是:ls -al ls是list的意思,重点在显示档案的文件名与相关属性.而选项-al则表示列出所有的档案详细的权限与属性.
- luogu2764 最小路径覆盖问题
最小路径覆盖,看这里 #include <iostream> #include <cstring> #include <cstdio> #include <q ...
- python中os和sys模块
os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口;sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. os 常用方法 os.rem ...
- day03_12 缩进介绍
python比较变态,必须缩进,而C可以不缩进,世界上只有python这门语言要求必须缩进 tab键是缩进,shift+tab往左移动 SyntaxError:invalid syntax 语法错误 ...
- netcore命令行部署|跨域问题
1.在hosting中修改发布端口号,如遇见不识别IP则改成*再用命令行运行 { "server.url": "http://*:8089"} 3.给接口开外网 ...
- 内存分配机制malloc&&alloca&&realloc
<1>从静态存储区域分配. 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量.<2>在栈上创建 在执 ...
- 骨牌覆盖问题总结!hihoCoder/ NYOJ-1273宣传墙1151
本想着做一下第九届河南省省赛题,结果被这个类似骨牌覆盖的题卡住了,队友然我去hihoCoder上老老实实把骨牌覆盖一.二.三做完,这题就没什么问题了.虽然很不情愿,但还是去见识了一下. 骨牌覆盖问题 ...