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

Doyle 發布于2019-08-29 13:01 / 2639人閱讀

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

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

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

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前輩總結

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112312.html

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

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

keelii 2019-08-20 18:19 評論0 收藏0
移動端軟鍵盤彈出時文本輸入框下沉、獲取焦點并彈出軟鍵盤

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

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

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

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

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

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

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

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