解决absolute fixed元素在安卓唤起虚拟键盘时,元素被挤上来。

//由于安卓虚拟键盘也会占位置,致使页面高度变小,所以absolute fixed元素跟着移动

//防止唤起键盘,导致absolute元素被挤上来

var isAndroid = navigator.userAgent.indexOf(‘Android‘) > -1 || navigator.userAgent.indexOf(‘Adr‘) > -1;

if (isAndroid){//如果是安卓手机的浏览器

var win_h = $(window).height();//关键代码

$("body").height(win_h);//关键代码

window.addEventListener(‘resize‘, function () {

// Document 对象的activeElement 属性返回文档中当前获得焦点的元素。

if (document.activeElement.tagName === ‘INPUT‘ || document.activeElement.tagName === ‘TEXTAREA‘) {

if($(‘.footerText‘).is(‘:visible‘)){

$(‘.footerText‘).hide();

}else{

$(‘.footerText‘).show();

}

}

});

}

原文地址:https://www.cnblogs.com/wugai/p/11610907.html

时间: 2024-10-24 19:49:40

解决absolute fixed元素在安卓唤起虚拟键盘时,元素被挤上来。的相关文章

收起虚拟键盘的各种方法 -- IOS

使用虚拟键盘来输入资讯,是 iOS 的重要互动方式之一,虚拟键盘通常会自动出现在可以编辑的 UITextField 或是 UITextView 的编辑事件中,叫出键盘固然容易,但是要把它收起来,可就没有这么简单,之前在 UITextField 输入结束后的收起小键盘的方式一文中,介绍了如何在编辑完成之后收起虚拟键盘,但是如果您的元件并没有对应的事件可以让你收起虚拟键盘,那又该如何做?下列我们以类似的元件 UITextView 为例,介绍一些通用的方法.  1. 点击编辑区以外的地方(UIView

ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: iscroll Jquery Mobile 监听屏幕滚动事件给 #footer 赋值 由于本人新手,第1,2种的方法就没学过,所以暂时不用这2方法,来看第三种:监听屏幕滚动事件给 #footer 赋值 首先设置 #footer 的 position 的值为 absolute 然后用$(window).scroll() 来监听,再给 #footer

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题 我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置

子元素的margin-top和margin-bottom影响父元素定位的原因和解决方法

<!DOCTYPE HTML> <html> <head> <title>margin transfer </title> <meta charset="utf-8"> <style type="text/css"> body{margin: 0;padding: 0;} .outer{width: 100px;height: 100px;background: #ccc;} .in

微信开发安卓虚拟键盘挡住输入框的问题

是这样的,现在有一个这样的页面: 这个页面刚好一屏幕大小,所以没有滚动条,因为"保存"键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了.苹果手机天然不会喔,苹果手机的键盘弹出来是占了下面的位置,从而把页面推了上去,整个页面就缩小了就不会出现这样的情况.安卓手机情况如下图: 我不停尝试去解决这个问题,但最终都不成功. 思考一: 如果能模仿苹果一样,当键盘弹出来的时候,将整个页面缩小成页面底部刚好贴着键盘,那就完美了.

子元素使用position:fixed,导致他的宽度不能和父元素保持一致的解决方案

最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢? <div class="fathor" style="width:1024px"> <div class="son" style="position:fix

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:absolute; 脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级. 固定定位:position:fixed; 这里他所固定的对象是

ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

一.实现点击按钮弹出层和点击空白处隐藏层,event.stopPropagation()是关键,阻止传导. <script type="text/javascript"> $(function () { $('#btnShow').click(function (event) { event.stopPropagation(); $('#div_apply').toggle(); }); $(document).click(function (event) { $('#di