成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

vvpvvp / 4156人閱讀

摘要：參考地址首先，是這樣的布局父容器里面放一個(gè)輸入框和一個(gè)按鈕思路是父容器定位，為，為布局在其他事件觸發(fā)輸入框出現(xiàn)的時(shí)候例如一個(gè)評論的，父容器值變?yōu)?，被軟鍵盤頂上來。

參考地址：

https://segmentfault.com/a/11...
https://blog.csdn.net/github_...
1.首先，是這樣的布局：父容器里面放一個(gè)輸入框 和一個(gè)按鈕

思路是：父容器fixed定位，bottom為0，left為-100%；flex布局；在其他事件觸發(fā)輸入框出現(xiàn)的時(shí)候（例如一個(gè)評論的icon），父容器 left值變?yōu)?，被軟鍵盤頂上來。

    
     
     
發(fā)送
        




.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;
    display: flex;
    align-items: center;

    &.iptfcs {
        left: 0;
    }
}

好吧，結(jié)果是根本頂不上來！需要多加一層父容器！

2.其次，是這樣的布局：父容器---父容器---輸入框+按鈕 

    

         
         
發(fā)送

    





.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;

    &.iptfcs {
        left: 0;
    }

    .ipt-box-cont{
        width: 100%;
        display: flex;
        align-items: center;
    }
}

這樣做，終于是頂上來了。點(diǎn)擊評論icon，showCipt 設(shè)置為true后，this.$refs.ctxt.focus() 聚焦準(zhǔn)備書寫。但是ios出現(xiàn)點(diǎn)擊聚焦不靈敏的情況！需要強(qiáng)制聚焦！

3.打開fastclick插件，將focus方法加入一行，強(qiáng)制聚焦： 
   FastClick.prototype.focus = function(targetElement) {
        var length;
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf("date") !== 0 && targetElement.type !== "time" && targetElement.type !== "month") {
            length = targetElement.value.length;
            targetElement.focus();  //新增這一行
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

這下點(diǎn)擊一次就可以聚焦了，而且經(jīng)過我的iphone7系統(tǒng)輸入法測試，沒有出現(xiàn)什么問題，當(dāng)我切換搜狗輸入法后，悲劇又發(fā)生了，遮擋一半?。Q了xr測試,完全遮擋?。。。?/p> 4.輸入法兼容問題有哪些

確實(shí)大部分 Android 瀏覽器是沒問題的，但是測試在 IOS 上，UC 瀏覽器配合原生輸入法和第三方輸入法（比如搜狗輸入法），輸入框都會(huì)被完全擋??；QQ 瀏覽器或微信瀏覽器，配合第三方輸入法，輸入框會(huì)被遮住一半；百度瀏覽器配合第三方輸入法輸入框也會(huì)被完全遮住。

5.軟鍵盤彈起，在安卓上是縮小了內(nèi)容區(qū)域的高度， 軟鍵盤將下半部分進(jìn)行遮擋；ios上則是整個(gè)webview整體上移，改變了整個(gè)內(nèi)容區(qū)域的scrollTop值。

經(jīng)過篩選，最終選擇使用定時(shí)器，思路如下：

點(diǎn)擊觸發(fā)input-------------在獲取焦點(diǎn)（軟鍵盤彈起）前，先將頁面的scrollTop值存起來-------
------獲取焦點(diǎn)------------判斷瀏覽器類型--------如果是ios，設(shè)置定時(shí)器，將此時(shí)內(nèi)容的高度值賦值給瀏覽器當(dāng)前滾動(dòng)高度（確保完全顯示）------
-----失去光標(biāo)--------------判斷瀏覽器類型------若為ios,清除定時(shí)器，并設(shè)置瀏覽器當(dāng)前滾動(dòng)高度值為一開始鍵盤未彈起的scrollTop值

//解決第三方軟鍵盤喚起時(shí)底部input輸入框被遮擋問題
    var bfscrolltop = document.body.scrollTop;//獲取軟鍵盤喚起前瀏覽器滾動(dòng)部分的高度
    $("input.inputframe").focus(function(){//在這里‘input.inputframe’是我的底部輸入欄的輸入框，當(dāng)它獲取焦點(diǎn)時(shí)觸發(fā)事件
        interval = setInterval(function(){//設(shè)置一個(gè)計(jì)時(shí)器，時(shí)間設(shè)置與軟鍵盤彈出所需時(shí)間相近
        document.body.scrollTop = document.body.scrollHeight;//獲取焦點(diǎn)后將瀏覽器內(nèi)所有內(nèi)容高度賦給瀏覽器滾動(dòng)部分高度
        },100)
    }).blur(function(){//設(shè)定輸入框失去焦點(diǎn)時(shí)的事件
        clearInterval(interval);//清除計(jì)時(shí)器
        document.body.scrollTop = bfscrolltop;將軟鍵盤喚起前的瀏覽器滾動(dòng)部分高度重新賦給改變后的高度
    });

應(yīng)用在我的代碼里面：

//點(diǎn)擊評論icon，觸發(fā)軟鍵盤彈起
    commentFocus(cid) {
        let _this = this;
        _this.scrollerval = document.body.scrollTop;
        _this.showCipt = true;
        _this.$refs.ctxt.focus();
        if (navigator.userAgent.indexOf("iPhone") > -1||navigator.userAgent.indexOf("iPad") > -1){
            _this.timer = setInterval(function () {
                document.body.scrollTop = document.body.scrollHeight;
            },1000);
        }
    },
//失去光標(biāo)
    resetipt() {
        let _this = this;
        _this.showCipt = false;
        if (navigator.userAgent.indexOf("iPhone") > -1 || navigator.userAgent.indexOf("iPad") > -1){
            clearInterval(_this.timer);
            document.body.scrollTop = _this.scrollerval;
        }
    },

當(dāng)然，把瀏覽器類型存起來用更好啦！

然后，就可以洗洗睡了?。?！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106850.html

相關(guān)文章

  • 可能這些是你想要的H5軟鍵盤兼容方案

    摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤收起?？梢宰屲涙I盤彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實(shí)不然。從...

    stackvoid 評論0 收藏0

  • 如何用 js 獲取虛擬鍵盤高度？（適用所有平臺(tái)）

    摘要：前言這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個(gè)什么別急，別急，接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的 前言 這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個(gè)什么？ 別急，別急，接下來我們...

    terro 評論0 收藏0

  • 如何用 js 獲取虛擬鍵盤高度？（適用所有平臺(tái)）

    摘要：前言這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個(gè)什么別急，別急，接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的 前言 這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個(gè)什么？ 別急，別急，接下來我們...

    Forest10 評論0 收藏0

  • 如何用 js 獲取虛擬鍵盤高度？（適用所有平臺(tái)）

    摘要：前言這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個(gè)什么別急，別急，接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的 前言 這是一個(gè)存在很久的歷史問題了，對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個(gè)什么？ 別急，別急，接下來我們...

    li21 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<