ios输入框(input,select,textarea)失去焦点,页面不归位

boyanx1个月前技术教程13

我是一块砖,哪里需要往哪搬!
移动项目开发中经常会遇到奇奇怪怪的问题,在正常不过了。而由于ios和安卓系统的不同,适配问题也是时常发生。
而其实一个,苹果手机输入框(input,select,textarea)失去焦点后,页面不归位的问题是在平常不过了。
问题分析:
由于安卓系统调用键盘的时候是直接浮动在页面上面的,而ios是整体把页面订到了上面,所以当键盘缩回时,ios系统上就会出现页面不会自动恢复原位的问题。
问题呈现:

解决方法:
两段简短js,完美结局问题。

//失去焦点
$("input,select").blur(function(){
 var top = $("body").scrollTop();
 $("body").scrollTop(top);
});
//失去焦点
$("input,select,textarea").blur(function(){
 $("body,html").scrollLeft(0);;
});

由于问题原因是输入框失去焦点后,页面没有互动,没有触发到页面恢复到原位置,所以我们就在失去焦点的时候,给他一个反馈,这样就能完美结局标题所述的问题了。
我是一块砖,如果你需要就去搬

相关文章

Web 性能优化、文档及代码编辑器相关的新提案

作为使用 Web 技术的代码编辑器从业者,关注 Web 平台的各种新提案是工作的一部分。随着 Monaco Editor 被很多服务使用,我也开始收到各个新提案的发起者的邀请,对他们的提案提供反馈。其...

掌握这 7 个 CSS 技巧,代码效率秒提升

最近接了个项目,PM 又来催:“登录弹窗能不能加点透明毛玻璃效果?活动标题再做点酷炫的渐变?对了,用户的反馈框能不能调整大小?”听完这要求,我脑袋直接嗡了:又想炫酷,又不想加班,这不扯嘛!正当我愁得要...

YAAT-Yat Another ActionTab开发(1)—— 拖拉拽组件

前段时间使用了一下ActionTab感觉这个产品,小编也想向这个产品学习学习,自己开发一个工具箱。就当是学习总结之用了,有兴趣的小伙伴可以私信小编获取代码,后续等功能界面稍微成型了再放到github上...

html开发笔记22-表单元素「用户名、密码、单选框、多选框」

一、表单元素介绍【用户名、密码、单选框、多选框】1、表单:就是从网页上看见的各种各样的框,比如 登陆框、同意协议的选项框、下拉框、只能选男女的选框等。二、演示:主要代码在下面三、代码实现:用户名、密码...

开源鸿蒙OpenHarmony 5.1.0(API 18)正式上线:进一步增强ArkUI

IT之家 5 月 4 日消息,开源鸿蒙 OpenHarmony 是由开放原子开源基金会孵化及运营的开源项目,目标是面向全场景、全连接、全智能时代,搭建一个智能终端设备操作系统的框架和平台,促进万物互联...

HTML元素基础讲解(html元素包括)

HTML元素的基本结构HTML元素通常由开始标签、内容和结束标签组成。基本结构如下:<标签名>内容</标签名>例如,一个段落元素:<p>这是一个段落。</p&...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。