说明:

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. 模块化规范:CMD和AMD的区别

    https://www.zhihu.com/question/20351507/answer/14859415 AMD(异步模块定义) 是 RequireJS 在推广过程中对模块定义的规范化产出.CM ...

  2. PHP公众号开发给用户发微信消息提醒功能

    最近做的一个项目,当有用户有资金到账或者成员变动时需要给他发一条微信消息提示.针对这个,开始想使用模板消息,但是刚注册的公众号申请消息模板需要几天时间申请,在时间不足下选择了使用客服消息接口,微信文档 ...

  3. SVM 实现多分类思路

    svm 是针对二分类问题, 如果要进行多分类, 无非就是多训练几个svm呗 OVR (one versus rest) 对于k个类别(k>2) 的情况, 训练k个svm, 其中, 第j个svm用 ...

  4. 浏览器渲染html的过程

    关于浏览器如何渲染html界面一直不太清晰,所以现在理一理.由于本身对前深入的东西不太清晰,这篇博客更多的是在记录. 参考:https://www.cnblogs.com/dojo-lzz/p/398 ...

  5. java实现表达式求值 (20 分)-------非递归版

    Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近由学会了一些简单的函数求值.比如,它知道函数min(20, 23)的值是20, add(10, 98)的值是108等等.经过训练,Dr.Kong ...

  6. Linux必知必会--sed

    致沅弟:至于当大事,全在明强二字. --<曾国藩家书> 参考资料:https://man.linuxde.net/sed   https://www.jianshu.com/p/047cd ...

  7. 26、pathlib文件系统模块(了解)

    一.pathlib库官方定义 pathlib 是Python内置库,Python 文档给它的定义是 Object-oriented filesystem paths(面向对象的文件系统路径).path ...

  8. 【Android Studio】Gradle

    Plugin version Required Gradle version 1.0.0 - 1.1.3 2.2.1 - 2.3 1.2.0 - 1.3.1 2.2.1 - 2.9 1.5.0 2.2 ...

  9. 为什么 JVM 不用 JIT 全程编译?

    考虑到跨平台,所以无法使用AOT: 考虑到执行效率,所以无法全部使用JIT: 编译技术大约分为两种,一种AOT,只线下(offline)就将源代码编译成目标机器码,这是普遍用在系统程序语言中:另一种是 ...

  10. Linux中的查找与替换

    grep只能用于查找文件中的内容sed可以查找,然后替换或者插入想要的内容 a :新增,a的后面可以接字串,而这些字串会在新的一行出现(目前的下一行):d :删除,因为是删除啊,所以d后面通常不接任何 ...