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

boyanx3个月前技术教程26

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

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

相关文章

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

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

JavaScript 控制文本框和文本域(js设置文本框的值)

文本框是表单中与用户打交道最多的元素之一,它包括单行文本框<input type="text">和多行文本框<textarea>,更广义的还可以包括密码输入框&...

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

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

JavaGUI——Java图形用户界面(java图形用户界面思维导图)

1、Java GUI 概述GUI(Graphical User Interface,简称 GUI,图形用户界面)是指采用图形方式显示的计算机操作用户界面,与早期计算机使用的命令行界面相比,图形界面对于...

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

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

PHP入门读书笔记(十六):WEB页面使用PHP

Web表单主要用来在网页中发送数据到服务器,经过程序处理中,将用户所需要的信息再传递给客户端的浏览器上。这样就形成了一个浏览者和网站之间的一个互动。一、表单的提交方式<form name=’NA...

发表评论    

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