在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 ...
随机推荐
- 02 Django框架基础(APP的创建访问)
一.创建项目 1.命令:django-admin startproject sitename 2.IDLE环境:本质上都是执行上述命令 常用命令: python manage.py runserver ...
- PHP数组函数 array_multisort() ----对多个数组或多维数组进行排序
PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...
- 15.Yii2.0框架where单表查询
目录 新建控制器 HomeController.php 新建model article.php 新建控制器 HomeController.php D:\xampp\htdocs\yii\control ...
- 编译与安装 OpenSSL
编译与安装 OpenSSL prefix 是安装目录,openssldir 是配置文件目录,另外建议安装两次,shared 作用是生成动态连接库.linux版的OpenSSL下载地址为:https:/ ...
- MySQL使用yum安装
1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-comm ...
- 使用Blend的一些问题和技巧
WPF开发,界面处理首选Blend,如果你开发了两年WPF都没接触过blend(当然这种几率不高),或者你刚接触WPF,可以考虑使用Blend,这货也算得上一个神器,上手也不难.以下有两位讲得不错,大 ...
- MongoDB学习-->Spring Data Mongodb-->MongodbTemplate
配置文件application-dev.yml: server: port: 8888 mongo: host: localhost port: 27017 timeout: 60000 db: ma ...
- iOS 9下支持的键盘类型:
http://blog.csdn.net/cloudox_/article/details/50532124
- python 获得列表中每个元素出现次数的最快方法
import collections import numpy as np import random import time def list_to_dict(lst): dic = {} for ...
- 台州学院we are without brain 训练 计算几何
A - View Angle Flatland has recently introduced a new type of an eye check for the driver's licence. ...