移动端键盘弹出影响布局的处理方法

原创 2018年04月15日 17:19:56

这几天做了关于移动端的一些页面,发现了一些问题,在这记录下,备用也供大家参考下

1:移动端通过%布局,当页面出现键盘时,页面高度改变从而会压缩整个页面

(1)

  var viewHeight = window.innerHeight;
        $(document).ready(function () {
            var viewHeight = window.innerHeight;
            $().height(viewHeight)
            $().height(viewHeight * x%)
            $().height(viewHeight * y%)
        })

第一种方法,固定高度,在页面加载完成以后固定高度,后期键盘弹出就不会改变高度,并且也可以适应移动端布局

(2)

$().focus(function () {
        })
 $().blur(function () {
           
        })

第二种是通过判断input焦点的方向写的,有焦点时也就是键盘弹出,定义样式,失去焦点再重新定义样式

缺点是:焦点的判断是通过是否在输入,所以一直点击input但是滑动屏幕时,键盘会收回,但是触发不了第二个函数

(3)

var viewHeight = window.innerHeight;
$(window).resize(function () {  
      var thisHeight = $(this).innerHeight();  
      if (viewHeight - thisHeight > 50) {  
          //窗口发生改变(大),故此时键盘弹出  
          $().css()
      } else {  
          //窗口发生改变(小),故此时键盘收起   
          $().css()
      }  
  });

这种方法的思路是通过页面高度的变化来判断是否有键盘弹出,借用了jquery中的resize函数,界面尺寸改变时出发




版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aliujiujiang/article/details/79950861

在vb中轻松制作支持断点续传的FTP、HTTP下载软件

在VB中制作支持断点续传的下载软件很简单,只要使用《金锋下载控件》就可轻松做到。控件下载地址:http://www.jinfengnet.com该控件:支持HTTP、FTP两种协议,支持断点续传,支持...
  • jinfengnet
  • jinfengnet
  • 2001-05-10 00:54:00
  • 1164

手机端虚拟键盘弹出使界面布局混乱解决方法

html5页面当点击input输入框弹出安卓手机上键盘就会把背景顶了上来,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度。 页面布局就乱了,解决方法: 原生...
  • yzbben
  • yzbben
  • 2017-03-07 16:07:48
  • 3252

手机软键盘弹出时影响布局的解决方法_javascript技巧

111
  • qq_39487576
  • qq_39487576
  • 2017-08-25 09:36:33
  • 182

软键盘弹出影响webapp中固定定位的问题

最近用html做app时,在修改密码页面弹出的软键盘将固定在页面底部的按钮顶上来了,导致布局有一定的混乱。我查阅了相关资料解决此问题。这里做一个记录。原因:某些安卓机下键盘弹起会引起窗口高度(html...
  • qq_36584352
  • qq_36584352
  • 2017-11-16 14:24:05
  • 295

移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1、 解决初始化...
  • kongjiea
  • kongjiea
  • 2015-06-18 11:46:36
  • 69739

移动端fixed和input获取焦点软键盘弹出影响定位的问题

在移动端使用fixed将按钮定位在底部时,当input获取焦点弹出软键盘时,在安卓系统会奖底部的按钮顶上去 // 检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况,这时把定位改成ab...
  • qq_33248419
  • qq_33248419
  • 2017-08-11 10:43:53
  • 602

移动端网页控制键盘弹出样式

在移动端app开发,用WebView加载Jsp或Html页面的时候会遇到这样的情况,如某个输入框输入的是数字类型的数据,手机键盘默认弹出的样式是中文或英文。         此时为了让用户有更好的体...
  • y550918116j
  • y550918116j
  • 2015-09-25 15:19:08
  • 1238

Android软键盘弹出时布局的调整问题

1。当不希望软键盘挤压布局时(直接覆盖下半部分) 设置该属性为android:windowSoftInputMode="adjustNothing" 即可 2.当Edittext处于屏幕下方时...
  • qq_21338465
  • qq_21338465
  • 2016-03-12 17:53:01
  • 1214

h5 安卓 软键盘弹出 布局压缩

webapp 使用百分比布局高度,再安卓机器上,点击input软键盘弹出会压缩整个布局 增加下面一句可以完美解决: $(document).ready(function () { $('...
  • qq_16165281
  • qq_16165281
  • 2017-03-30 10:01:58
  • 1642

当移动端软键盘弹出时错位问题解决方案

问题源头 移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点 但是文本框获得焦点未必会弹出键盘!!! 收起虚拟键盘的条件是:文本框失焦 PS:总而言之,我们认为会出现或者消失虚拟键盘的时候都...
  • jinxi1112
  • jinxi1112
  • 2016-09-10 13:44:05
  • 1250
收藏助手
不良信息举报
您举报文章:移动端键盘弹出影响布局的处理方法
举报原因:
原因补充:

(最多只允许输入30个字)