在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 ...
随机推荐
- Java 多线程同步生产者消费者问题-monitor
对这个问题更深一点理解是,每一个线程都在竞争这个类的实例的monitor对象. java会为每个object对象分配一个monitor,当某个对象的同步方法(synchronized methods ...
- 如何用纯 CSS 创作一个小球反弹的动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 ...
- Thinkphp5 的常用连式查询
目录 取出表中改字符串前两位等于01的数据 按主键查询 不按主键查 JOIN方法 的左右连接 not in 方法 like 查询 where 按条件筛选查询 取出表中改字符串前两位等于01的数据 $p ...
- bash之条件测试if/else
bash之条件测试: if/then结构 条件测试(CONDITION): test EXPRESSION:测试条件表达式正确否 [ EXPRE ...
- loj2000 「SDOI2017」数字表格
there #include <iostream> #include <cstring> #include <cstdio> using namespace std ...
- luogu2774 方格取数问题
最大点权独立集,参见胡伯涛论文 #include <iostream> #include <cstring> #include <cstdio> #include ...
- rocketmq源码分析4-事务消息实现原理
为什么消息要具备事务能力 参见还是比较清晰的.简单的说 就是在你业务逻辑过程中,需要发送一条消息给订阅消息的人,但是期望是 此逻辑过程完全成功完成之后才能使订阅者收到消息.业务逻辑过程 假设是这样的: ...
- 再谈H2的MVStore与MVMap
对H2的[MVStore]: http://www.cnblogs.com/simoncook/p/5188105.html 这篇文章的补充. 概述 我们通常用的map,比如HashMap Linke ...
- Python面向对象(组合、菱形继承、多态)
今日内容: 1.组合 2.菱形继承 3.多态与多态性 昨天内容重点回顾: 1)调用也叫实例化:发生了2件事 1.创造空对象 2.触发对象下的__init__方法,然后将p连同参数一同传给init ...
- [python测试框架] http接口测试框架
https://testerhome.com/topics/5631 Http 接口测试框架 (思路 + 实现中 + 开源 + 可能难产) Http 接口测试框架疑问解答 Fiddler 保存会话 ( ...