我遇到的問題：在一個頁面里有一個彈出層之前我給我的最外層加了固定定位 用了下面的方法也不好使；沒有辦法我將之改為絕對定位層級變高在加上一個頂部標簽通過js計算頂部高度來實現滿屏遮擋；

<section class="sureTweetApply" style="display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"><!--<div class="sureTweetApply-bg">--><!--</div>--><div style="width: 100%;height: 100%;overflow: hidden"><div class="fuQinTop"></div><div class="fuQin clearfix"><div class="fl sureTweetApply-content"><div class="sureTweetApply-contentName">申請合伙人</div><div class="sureTweetApply-contentInformation"><div><span>真實姓名 : </span><input name="realyName" type="text" placeholder="請輸入您的真實姓名"/></div><div><span>身份證號 :</span><input class="TweetApplyIdCard" name="information_identity" type="text" placeholder="請輸入您的身份證號"/></div><span class="cardNotes"><i></i>請填寫銀行卡信息，傭金結算需用；只支持向賬戶類型為個人的賬戶結算；</span><div><span>銀行卡號 : </span><input class="TweetApplyBankCard" type="text" placeholder="請輸入銀行卡卡號"/></div><div><span>卡賬戶名 : </span><input name="cardName" type="text" placeholder="請輸入銀行卡持有人名稱"/></div><div><a href="javascript:void(0);" class="blankCardKaihu clearfix"><div class="fl"><span>開戶銀行 : </span> </div><div data-id="1" class="fl cardAddress">請選擇銀行</div><i class="fr"></i></a><!----><!--<input name="cardAddress" type="text" placeholder="請輸入開戶行地址"/>--></div><span class="sureTweetApply-agree"><span class="readAndAgree" data-agree="1"><i class="sureTweetApply-agreeImgSet"></i>我已閱讀并同意</span><a class="tweetProtocolCli" href="javascript:void(0)">《合伙人協議》</a></span></div><div class="sureTweetApplyBtn"><button class="tweetApplyBtn grey" data-sure="1" type="button">確認申請</button><!--<a class="tweetApplyBtn green" href="javascript:void(0)">確認申請</a>--></div></div><div class="fl sureTweetApply-contentAdress"><div class="closeAddress"><i></i></div><div class="sureTweetApply-contentAdressName">開戶銀行</div><div class="sureTweetApply-contentAdress-list"><ul><volist name="banks" id="vo" key="key"><!--<li data-id="" class="redColor"></li>--><li data-id="{$vo.number}">{$vo.bankName}</li></volist></ul></div></div></div></div> </section> /*確認推客申請*/ .sureTweetApply-bg{width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;} .fuQin{/*position: fixed;*//*bottom: 0px;*//*float: left;*/width: 200%;overflow: hidden;background-color: #ffffff; } .fuQinTop{background-color: rgba(0,0,0,0.3);z-index: 999;width: 100%;} .sureTweetApply-content{background-color: #FFFFFF;width:50%;vertical-align: bottom;} .sureTweetApply-contentName{width: 100%;height: 44px;line-height: 44px;text-align: center;border-bottom: 1px solid #EEEEEE;font-size: 15px;} .sureTweetApply-contentInformation{padding: 0px 10px;} .sureTweetApply-contentInformation div{width: 100%;height: 44px;line-height: 44px;border-bottom: 1px solid #EEEEEE;font-size: 14px;color: #666666;} .sureTweetApply-contentInformation div a{display: block;} .sureTweetApply-contentInformation div a div:nth-child(1){width: 80px;} .sureTweetApply-contentInformation div a div:nth-child(2){width: 120px;color: #999999;} .sureTweetApply-contentInformation div a i{margin-top: 17px;margin-right: 7px;width: 9px;height: 9px;border-right: 1px solid #848689;border-bottom: solid #848689 1px;display: block;-webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transform: rotate(-45deg); } .sureTweetApply-contentInformation div span{margin-right: 10px;} .sureTweetApply-contentInformation div input{width: 70%;height: 16px;line-height: 16px;font-size: 14px;color: #666666;font-family: Microsoft YaHei,Arial;} .sureTweetApply-contentAdress{background-color: #FFFFFF;width:50%;vertical-align: bottom;} .sureTweetApply-contentAdressName{width: 100%;height: 44px;line-height: 44px;text-align: center;border-bottom: 1px solid #EEEEEE;font-size: 15px;} .sureTweetApply-contentAdress-list ul{height: 375px;width: 100%;overflow: scroll;-webkit-overflow-scrolling : touch;} .redColor{color: #f00;} .closeAddress{position: absolute;top:0px;right: 7px;padding: 11px;} .closeAddress i:nth-child(1){position:relative;width:1px;height:14px;background: #333;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);display: inline-block; } .closeAddress i:after{content: "";position: absolute;top: 0;left: 0;width:1px;height:14px;background: #333;-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg); } /*border-bottom: 1px solid #EEEEEE;*/ .sureTweetApply-contentAdress-list ul li{width: 100%;height: 44px;line-height: 44px;font-size: 14px;padding: 0px 15px;} .cardNotes{color: #999999;padding: 18px 0px 0px 0px;display: block;} .cardNotes i{width: 14px;height: 14px;line-height:16px;background: url("../images/notes.png") no-repeat;background-size:100% 100%;display: inline-block;margin-right: 6px;vertical-align: middle;margin-top: -2px;} .sureTweetApply-agree{color: #666666;font-size: 12px;border-bottom: 1px solid #EEEEEE; display: block;} .sureTweetApply-agree span{display: inline-block;padding: 12px 0px 22px 0px;} .sureTweetApply-agreeImg{width: 18px;height: 18px;line-height:20px;background: url("../images/selected2.png") no-repeat;background-size:100% 100%;display: inline-block;margin-right: 4px;vertical-align: middle;margin-top: -2px;} .sureTweetApply-agreeImgSet{width: 18px;height: 18px;line-height:20px;background: url("../images/selected02.png") no-repeat;background-size:100% 100%;display: inline-block;margin-right: 4px;vertical-align: middle;margin-top: -2px;} .sureTweetApply-agree a{color: #00A2E3;padding: 12px 0px 22px 0px;} .sureTweetApplyBtn{padding: 10px 12px;width: 100%;} .tweetApplyBtn{display: inline-block;text-align: center;width: 100%;height: 40px;line-height: 40px;color: #FFFFFF;font-size: 15px;border-radius: 4px;} .grey{background-color: #D7D7D7;border: 1px solid #D7D7D7;} .green{background-color: #62B900;border: 1px solid #62B900} $(function(){$(".sureTweetApply").show();var fuQinHeight = $(".fuQin").height();$(".sureTweetApply").hide();// $(".sureTweetApply-bg").hide();$(".fuQin").css({'z-index': '999','width': '200%'});// $(".fuQin").css({'position': 'fixed','bottom': -fuQinHeight+'px','width': '200%'});//點擊加入推客顯示申請信息$(".addTweetBut").on('click',function(){//event.stopPropagation();$(".addTweet").hide();$('.sureTweetApply').show();$(".sureTweetApply-bg").show();var fuQinHeight = $(".fuQin").height();var windowHeight = $(window).height(); //獲取當前頁面高度var chaHeight = windowHeight - fuQinHeight;$(".fuQinTop").css('height',chaHeight+'px');// $(".fuQin").show();// $(".fuQin").css({'position': 'fixed','bottom':'0px','width': '200%','transition':'0.3s'}); });$(".fuQinTop").on('click',function(event){// $(".fuQin").css({'bottom':-fuQinHeight+'px','transition':'0.3s'});window.setTimeout(function(){$('.sureTweetApply').hide();$(".sureTweetApply-bg").hide();$(".addTweet").show();},250);// window.setTimeout(function(){// $('.sureTweetApply').show();// },350); });$(".sureTweetApply-content").on('click',function(){event.stopPropagation();});$(".sureTweetApply-contentAdress").on('click',function(){event.stopPropagation();});//驗證銀行卡只能輸入數字$(".TweetApplyBankCard").on('keyup',function(){var val = $(this).val();//身份證號var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//只能是數字$(this).val($(this).val().replace(/[^\d$]/ig,''));});//點擊開戶銀行 顯示銀行列表$(".blankCardKaihu").on('click',function(){$(".fuQin").css({'margin-left':'-100%','transition': '0.5s'});});$(".closeAddress").on('click',function(){$(".fuQin").css({'margin-left':'0%','transition': '0.5s'});});$(".sureTweetApply-contentAdress-list").find('ul').find('li').each(function(){$(this).on('click',function(){var dataId = $(this).attr('data-id');var dataName = $(this).html();$(".cardAddress").html(dataName);$(".cardAddress").attr('data-id',dataId);$(".cardAddress").css('color','#666666');$(this).siblings().removeClass('redColor')$(this).addClass('redColor');$(".fuQin").css({'margin-left':'0%','transition': '0.5s'});})});});

?

?

?

?

前提：

關于input框被瀏覽器軟鍵盤遮擋住的問題，主要是安卓瀏覽器，下面出一個解決方案：

?

?

?

解決方案原理：

安卓瀏覽器在軟鍵盤彈出后不會像ios瀏覽器那樣重新計算window的高度，所以導致安卓瀏覽器window的高度在軟鍵盤彈出的時候為“軟鍵盤的高度＋（window的高度－軟鍵盤的高度）”；而其實，此時，合理的高度應該是頁面的高度＋軟鍵盤彈出的高度；就此解決方案為如下：

var winHeight = $(window).height(); //獲取當前頁面高度 $(window).resize(function() { var thisHeight = $(this).height(); if (winHeight - thisHeight > 50) { //當軟鍵盤彈出，在這里面操作 //alert('aaa'); $('body').css('height', winHeight + 'px'); } else { //alert('bbb'); //當軟鍵盤收起，在此處操作 $('body').css('height', '100%'); } });

?

轉載于:https://www.cnblogs.com/lst619247/p/8939769.html

總結

以上是生活随笔為你收集整理的js－移动端android浏览器中input框被软键盘遮住的问题解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。