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

boyanx7个月前技术教程52

我是一块砖,哪里需要往哪搬!
移动项目开发中经常会遇到奇奇怪怪的问题,在正常不过了。而由于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);;
});

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

相关文章

快速了解JavaScript富文本编辑(js 富文本编辑器插件)

富文本编辑器(Rich Text Editor)是在网页上使用的一种所见即所得的文本编辑器,是 Web 应用开发中很常见的需求。富文本实现在 HTML 文档上共有 2 中方式实现富文本编辑器。一种是使...

前端入门——html 表单控件使用(html表单应用)

上篇介绍了表单的使用,表单有很多控件,比如输入框,密码框、文本域,按钮等。按类型可分如下:输入类控件菜单类控件输入类组件 —— input此类控件有很多种类型,使用<input type=...

HTML常用基础标签,前端从入门到精通

首先,我们来理解一下一个网页的基本组成代码如下一个网页是有许许多多的标签对组成的,即开始标签-结束标签,都是成对出现(当然我们后面会说的还存在单标签,表示自闭合标签,例如:<br />)对...

css技巧之重置样式的那些事(css重写样式)

在前端开发中,为了统一各个浏览器的样式统一,我们要将各个浏览器的默认样式进行重新设置。这个过程就叫做css样式重置。根据实际项目大家都有一套自己的样式。下面我们来看看需要特别说明的一些事:1、text...

3分钟入门微信小程序开发 组件分类 常用基本组件

微信为小程序提供的组件,可以帮助开发者快速搭建出漂亮的页面结构,共9大类,包括:1.视图容器:view布局组件(相当于div)、scroll-view滚动列表组件、swiper和swiper-item...

简单了解CSS3的all属性(css全部属性)

作者:张鑫旭(@张鑫旭)网址:http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/一、兼容性一些CSS文章,或者CSS文档,...

发表评论    

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