當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

js－移动端android浏览器中input框被软键盘遮住的问题解决方案

發布時間：2024/4/14 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 js－移动端android浏览器中input框被软键盘遮住的问题解决方案小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

<section class="sureTweetApply" style="display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"><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></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></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="{$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的高度－軟鍵盤的高度）”；而其實，此時，合理的高度應該是頁面的高度＋軟鍵盤彈出的高度；就此解決方案為如下：

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

總結

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

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

上一篇： Redis学习-sorted set数据
下一篇： Oracle11gR2-聚簇因子浅析