移动端软件盘遮挡输入框问题

第一、首先解决软键盘影响布局的问题:

  软键盘弹出会改变浏览器可视区域的高度,安卓会触发window.resize事件,ios不会触发,所以如果页面元素的布局是以窗口大小为基准的话,会出现布局混乱;比如body的height:100%等等,

  所以需要在页面初始化完成后执行这段代码(固定body的高度,不让他自适应)

  $(document).ready(function () {

    $(‘body‘).height($(‘body‘)[0].clientHeight);

  });

第二、区分输入框被遮挡的类型

  输入框的高度目测最高是页面可视区域的一半,即1/2手机屏幕宽度,所以如果所有输入框都在页面上半部分,就不存在软键盘遮挡输入框的问题

  (1)、输入框在页面的底部且第一个输入框在页面下半部分

    输入框组用绝对定位定位到页面底部。当软键盘弹出时也就自动把所有的输入框弹上去

  (2)、输入框组的总高度大于1/2页面高度

    给每个输入框做focuse监听事件或者直接监听window.resize事件(如果使用的是第三方输入法的话,需要把下面的代码放到时间函数内部)

      document.activeElement.scrollIntoView(false);

      document.activeElement.scrollIntoViewIfNeeded();

      或者

      function scrollT(){

        $("html,body").animate({scrollTop: $(".fI_now").offset().top}, 300);

      }

    

参考网址:

深入理解滚动scroll:https://www.cnblogs.com/xiaohuochai/p/5831640.html

时间: 2024-10-16 09:26:00

移动端软件盘遮挡输入框问题的相关文章

iOS- UITextView与键盘回收与键盘遮挡输入框

一.UITextView 可以实现多行输入的文本框,基本属性与UITextField相似,可以输入多行,可以滚动.UITextView还有个代理方式- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text 可以控制输入文字的数量,较为常用 #pragma mark UITextView的代理方法 //是否可以开始编辑 - (BOOL

LinearLayout详解四:彻底解决软键盘遮挡输入框的问题

之前把预备知识都介绍完了,话说学以致用,接下来我们要通过重载LinearLayout类来解决软键盘覆盖的问题. 首先阐述一下这个问题,如下图所示: 然后看挡住输入框的情况 然后我们给出xml的源代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:lay

服务端软件的服务品质

Web服务端软件的服务品质概要 软件品质概述 提供同样功能.产品和服务的服务者中, 竞争力来自功能的多样化和服务品质的差异化, 无论是个体.企业还是国家. 这里的服务指功能.产品的实现程度和处理能力,以及研发/客服提供的技术支持程度(7*24, 随时响应, 沟通便捷,快速解决,温馨提示,有效指南等). 从某种意义来说, 一切皆服务. 功能和产品只是形式, 服务才是本质.服务响应某种需求从而具备存在价值.个体.企业为社会提供某种类型.某种程度的服务,并获得相应回报. 程序员提供的服务是,在特定的工

Android WebView中软键盘会遮挡输入框相关问题

要想实现这样的软键盘出现的时候会自己主动把输入框的布局顶上去的效果,须要设置输入法的属性,有下面两种设置方式: 一.在java代码中设置例如以下: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE| WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 二.在androidmanifest.xml中设置与其相应的activity的属性

酷六类视频网站Android端软件开发视频教程

风网大话优酷 酷六类视频网站Android端软件开发视频教程本系列教程主要讲解一个类似于酷六.优酷等视频网站Android端软件的整体架构.开发流程及代码编写的全过程.具体涉及网络的上传.下载.多线程.SQLite数据库.SDcard操作.UI界面的显示和事件响应.设计模式的介绍和实战,IoC的精妙应用等. 课程目录:1.软件的演示以及和其他软件的比较 133MB2.Android娱乐多媒体的开发的重要的战略意义分析 45.3MB3.软件的概述 47.1MB4.该软件与Android就业 38.

React-native键盘遮挡输入框问题的解决

RN中要解决键盘遮挡输入框的问题其实有挺多方式,在这里只是记录其中的一些个人实际开发中使用到的. 方式一.使用scrollTo方法,这也是最简单最粗暴的,只是需要计算scrollview滚动的距离,并且处理一些体验的bug问题.大致思路是:组件render方法中使用scrollview,并且设置scrollview的keyboardShouldPersistTaps={true}(此步一定不能少,如果缺少该属性,接下来的一步将会不起作用),然后在scrollview中用一个view作为conta

Android版Ftp服务端软件

分享一款开发的Android版Ftp服务端软件,支持Android4.0及以上版本,可以实现局域网无线传输文件到手机,或者把手机上的多媒体文件分享到iPad等设备来扩展这些设备的存储空间,详情请见软件的使用帮助,截图如下: iPad等设备播放手机上的多媒体文件: 下载地址: http://pan.baidu.com/s/1sjlZBzR 提取码: khji

SVN—怎样安装SVNserver端软件

一.怎样安装1.4.5版本号的SVNserver端软件:        a.下载1.4.5版本号的SVNserver端软件.下载地址:http://download.csdn.net/download/wangshuxuncom/8049817        b.解压该压缩文件然后依照里面名为"SVN 1.4.5 安装方法.doc"的word文档进行安装就可以. 二.怎样安装1.7.9版本号的SVNserver端软件:        a.下载1.7.9版本号的SVNserver端软件,

自定义dialog样式,自动弹出软件盘

开发中android自带dialog样式有时候不能满足我们的需求,这时候就需要自定义样式了,调用dialog的setView方法可以自定义布局,代码如下 final AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(context); View alertDialogView = View.inflate(context, R.layout.comment_input_layout, null); final Ale