说明:

html默认select选择框控件在IOS的浏览器中 是底部弹出下拉选择。

这样到时页面位置错位,选择结束后对应不少元素的点击事件不响应。

这样看起来问题不大,但是选择完成之后点击确定提交弹出框的话  框内的按钮就很有可能不在页面上了(因为页面已经往上移了)  所以框上的按钮就会失效。  解决方案:

点击确认提交时让页面回到原位

js 点击时:

window.scrollTo(0, document.body.scrollTop + 1);

document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);

jquery下响应处理代码:
                //处理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标签选择完成之后页面不会自动回到原位的更多相关文章

  1. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

  2. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  3. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  4. 禁止select标签选择,禁止select组件change值

    大家知道, 对于HTML控件select, 是没有readOnly属性的,所以设置它并不起作用,如: 如果用disabled的话,提交时又取不到值. 那有什么方法可以实现?可以有一个折中的方法,如下: ...

  5. 微信浏览器软键盘弹出与页面resize的问题

    使用微信打开网页,弹出软键盘时遇到的兼容问题 过去开发中遇到过很多这种情况,页面底部需要固定定位一个按钮,广告栏或者菜单栏,页面中有表单项需要填写,在打开手机虚拟键盘的时候,底部固定定位的元素会处在软 ...

  6. 解决微信浏览器无法使用window.location.reload()刷新页面

    解决方法: 使用    window.location.href=window.location.href+随机数    代替 window.location.reload(). function r ...

  7. vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。

    methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...

  8. 解决微信浏览器无法使用window.location.reload刷新页面

    function reload(){ window.location.href=window.location.href+"?id="+10000*Math.random(); }

  9. 微信浏览器播放音频的问题:preload属性

    测试工具:ios微信. h5的Audio对象有个很重要的属性:preload;preload 属性规定是否在页面加载后载入音频.有4个值:auto - 当页面加载后载入整个音频meta - 当页面加载 ...

随机推荐

  1. vue的v-bind详解

    前言 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.这篇文章主要介绍了VueJs中的V-bin ...

  2. Web前端2019面试总结3(东软集团面试题)

    严禁转载,严禁分享,只供私自鉴赏,请君悉知! 一:基础题 1.什么是margin塌陷?请写出至少三种解决margin塌陷的方法. 答:当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现 ...

  3. 面试题:什么叫B树

    B是balanced的意思 是在二叉查找树  树的基础上增加了平衡的性质   导致它不是  二叉树了,变成了多叉树,但是叉几路又有了限制  否则怎么平衡呢 一棵m阶B树(balanced tree o ...

  4. Vue Nginx反向代理配置 解决生产环境跨域

    Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...

  5. linux-ifconfig 查看没有IP

    ifconfig 查看没有IP,如图: 解决方法: 1.切换路径到 2.进入编辑ifcfg-ens33文件(文件名可能不同)模式 3.ONBOOT改为yes 4.点击ESC,输入:wq进行保存 5.输 ...

  6. NumPy 之 存储文件和线性代数

    import numpy as np File Input and Output NumPy is able to save and load data to and from disk either ...

  7. “GIS DICTIONARY A-Z” 查询页面开发(3)—— 基础知识之服务器、IP地址、域名、DNS、端口以及Web程序的访问流程

    今天补一补基础知识: 一.服务器:能够提供服务的机器,取决于机器上安装的软件(服务软件).服务器响应服务请求,并进行处理. Web服务器:提供Web服务,即网站访问.常见Web服务软件:Apache( ...

  8. 简述mysql问题处理

    最近,有一位同事,咨询我mysql的一点问题, 具体来说, 是如何很快的将一个mysql导出的文件快速的导入到另外一个mysql数据库.我学习了很多mysql的知识, 使用的时间却并不是很多, 对于m ...

  9. 我的GitHub:https://github.com/javaFesh?tab=repositories

    https://github.com/javaFesh?tab=repositories

  10. Python使用Thrift

    2019年07月30日 14:59:29 Shower稻草人 阅读数 25更多 分类专栏: Python   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接 ...