苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位
说明:
html默认select选择框控件在IOS的浏览器中 是底部弹出下拉选择。
这样到时页面位置错位,选择结束后对应不少元素的点击事件不响应。

这样看起来问题不大,但是选择完成之后点击确定提交弹出框的话 框内的按钮就很有可能不在页面上了(因为页面已经往上移了) 所以框上的按钮就会失效。 解决方案:
点击确认提交时让页面回到原位
js 点击时:
window.scrollTo(0, document.body.scrollTop + 1);
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
//处理IOS浏览器,弹出层定位问题
if (navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)) {
var height = 0;
$('body').on({
click: function () {
height = $(window).scrollTop();
},
blur: function () {
$(window).scrollTop(height);
}
}, '.modal input');
}
苹果手机微信浏览器select标签选择完成之后页面不会自动回到原位的更多相关文章
- 防止微信浏览器video标签全屏的问题
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...
- 大事记 - 安卓微信浏览器 video 标签层级过高
// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- 禁止select标签选择,禁止select组件change值
大家知道, 对于HTML控件select, 是没有readOnly属性的,所以设置它并不起作用,如: 如果用disabled的话,提交时又取不到值. 那有什么方法可以实现?可以有一个折中的方法,如下: ...
- 微信浏览器软键盘弹出与页面resize的问题
使用微信打开网页,弹出软键盘时遇到的兼容问题 过去开发中遇到过很多这种情况,页面底部需要固定定位一个按钮,广告栏或者菜单栏,页面中有表单项需要填写,在打开手机虚拟键盘的时候,底部固定定位的元素会处在软 ...
- 解决微信浏览器无法使用window.location.reload()刷新页面
解决方法: 使用 window.location.href=window.location.href+随机数 代替 window.location.reload(). function r ...
- vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。
methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...
- 解决微信浏览器无法使用window.location.reload刷新页面
function reload(){ window.location.href=window.location.href+"?id="+10000*Math.random(); }
- 微信浏览器播放音频的问题:preload属性
测试工具:ios微信. h5的Audio对象有个很重要的属性:preload;preload 属性规定是否在页面加载后载入音频.有4个值:auto - 当页面加载后载入整个音频meta - 当页面加载 ...
随机推荐
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- npm升级到最新版本、指定版本
npm 升级到最新版本 //linux下 npm install -g npm npm升级到指定版本 //比如升级到5.6.0 npm install -g npm@5.6.0
- Hadoop的伪分布式的安装
查看下载地址:http://archive.cloudera.com/cdh5/cdh/5/hadoop-2.6.0-cdh5.4.0-src.tar.gz 解压hadoop-2.6.0-cdh5.4 ...
- pandas 之 group by 过程
import numpy as np import pandas as pd Categorizing a dataset and applying a function to each group ...
- Win10 系统删除文件时提示文件不存在
Win10系统使用一段时间后用户都会定期进行删除清理系统垃圾,减少系统盘的容量占用,但在删除的过程中许多用户都遇到无法删除的情况,这一次系统提示"文件不存在",这该怎么解决?我们可 ...
- 技术分享 | mysql 表数据校验
1. checksum table. checksum table 会对表一行一行进行计算,直到计算出最终的 checksum 结果.比如对表 n4 进行校验(记录数 157W,大小为 4G) [yt ...
- php桥接模式(bridge pattern)
有点通了 <?php /* The bridge pattern is used when we want to decouple a class or abstraction from its ...
- Find the median(2019年牛客多校第七场E题+左闭右开线段树)
题目链接 传送门 题意 每次往集合里面添加一段连续区间的数,然后询问当前集合内的中位数. 思路 思路很好想,但是卡内存. 当时写的动态开点线段树没卡过去,赛后机房大佬用动态开点过了,\(tql\). ...
- P5022 旅行[基环树]
以后必须学会面向数据编程!看半天题目不知道咋写直接爆搜,结果分少的可怜,还不如直接贪搞个60分. 观察数据,发现图至多存在一个环. 显然,如果没有环,这个题不跟你多bb,直接贪就完事了,线性复杂度. ...
- 第3章 常用linux命令 3.5 文件压缩命令
实验六 文件及目录的压缩解压缩相关命令的使用 [实验目的] 1.掌握linux压缩文件实质 2.掌握linux中压缩及解压缩指令的用法 [实验环境] 1. 标准配置PC一台 2. linux操作系统: ...