移動端軟鍵盤彈出時文本輸入框下沉、獲取焦點并彈出軟鍵盤

keelii 發(fā)布于2019-08-20 18:19 / 3264人閱讀

摘要：文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫方法利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。效果點擊按鈕彈出輸入框獲取焦點并彈出軟鍵盤類似微信朋友圈空間。

## 文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫 ##

//方法：利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。并設(shè)置一個定時器每過0.5秒設(shè)置一次，
//這個是因為軟鍵盤還沒有完全彈出滾動條已經(jīng)到此時的底部了，等軟鍵盤完全彈出后就遮住了輸入框（需要再次設(shè)置滾動條）。

let interval;

//消息框獲取焦點
 document.querySelector(".class或者#id").onfocus = function(){
   interval = setInterval(function() {
        document.body.scrollTop = document.body.scrollHeight;
    }, 500)
}

//消息框失去焦點
document.querySelector(".class或者#id").onblur = function(){
    clearInterval(interval);
}

以上是借鑒segmentfault前輩總結(jié)

文本輸入框獲取焦點并彈出軟鍵盤（適用文本框開始隱藏需要觸發(fā)顯示）

解決思路：獲取焦點并彈出軟鍵盤的前提（移動端我的理解）要讓輸入框顯示出來，這里就可以通過層或者透明度(opacity)來解決，由于業(yè)務(wù)關(guān)系透明度不適用所以大多數(shù)采用了層（z-index）來解決。

效果：點擊按鈕彈出輸入框獲取焦點并彈出軟鍵盤（類似微信朋友圈、QQ空間）。

GPU云服務(wù)器云服務(wù)器 java鍵盤獲取焦點鍵盤遮擋輸入框 html輸入框鍵盤 jq彈出輸入框

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

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

相關(guān)文章

移動端軟鍵盤彈出時文本輸入框下沉、獲取焦點并彈出軟鍵盤

摘要：文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫方法利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。效果點擊按鈕彈出輸入框獲取焦點并彈出軟鍵盤類似微信朋友圈空間。 ## 文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫 ## //方法：利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。并設(shè)置一個定時器每過0.5秒設(shè)置一次， //這個是因為軟鍵盤還沒有完全彈出滾動條已經(jīng)到此時的底部了，等軟鍵盤...

Doyle 2019-08-29 13:01 評論0 收藏0
移動端軟鍵盤彈出時文本輸入框下沉、獲取焦點并彈出軟鍵盤

摘要：文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫方法利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。效果點擊按鈕彈出輸入框獲取焦點并彈出軟鍵盤類似微信朋友圈空間。 ## 文本輸入框容易下沉因為軟鍵盤彈出時是一個動畫 ## //方法：利用滾動條，彈出軟鍵盤的時候讓滾動條滾動到最底部。并設(shè)置一個定時器每過0.5秒設(shè)置一次， //這個是因為軟鍵盤還沒有完全彈出滾動條已經(jīng)到此時的底部了，等軟鍵盤...

phodal 2019-08-01 17:15 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

gclove 2019-08-30 15:54 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

URLOS 2019-08-02 13:56 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調(diào)試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內(nèi)，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發(fā)過程中，我們經(jīng)常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導(dǎo)致覆蓋 h5頁面輸入框問題，在此進(jìn)行回顧并分享給大家系統(tǒng)：An...

Honwhy 2019-08-23 14:12 評論0 收藏0