解決ios部分手機鍵盤彈起導致input無法聚焦的bug
環境:微信瀏覽器
場景:我們的登入頁面,兩個輸入框,點選獲取驗證碼,彈出一個彈層,彈層採用fixed佈局,彈層元素是輸入框來輸入驗證碼的
問題:點選彈層input獲取焦點後,鍵盤自動彈起,把頁面頂起來了,當點選彈層中處input外區域,鍵盤自動收起,彈層輸入框恢復原位,但是無法聚焦,形成一個bug
測試:測試過程中發現鍵盤收起後的輸入框無法聚焦,但是在之前被鍵盤頂起來的位置點選居然有效,鍵盤再次彈起,故猜測時webview的內部scrollview自己實現的鍵盤彈起上滾頁面,但是鍵盤收起時頁面沒有回滾,只是因為定位的關係頁面雖然還原,但是scrollview沒動,導致點選元素還停留在鍵盤彈起的地方
解決:監聽input的blur事件,執行window.scroll(0,0)讓頁面還原到初始位置
相關推薦
解決ios部分手機鍵盤彈起導致input無法聚焦的bug
環境:微信瀏覽器 場景:我們的登入頁面,兩個輸入框,點選獲取驗證碼,彈出一個彈層,彈層採用fixed佈局,彈層元素是輸入框來輸入驗證碼的 問題:點選彈層input獲取焦點後,鍵盤自動彈起,把頁面頂起來了,當點選彈層中處input外區域,鍵盤自動收起,彈層輸入框恢復原位,但是無法聚焦,形成一個
解決移動端鍵盤彈起 導致input佈局出現問題的解決方法
var ua = window.navigator.userAgent; if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1){ var winHeight =
js 監聽ios手機鍵盤彈起和收起的事件
document.body.addEventListener('focusin', () => { //軟鍵盤彈起事件 console.log("鍵盤彈起") }) document.body.addEventListener('focusout', () => { //軟
如何解決安卓手機鍵盤彈出將頁面壓縮
輸入 var top 獲取 彈出 需要 height osi 項目 很多時候項目中我們需要用到輸入框input,input聚焦時會調用手機鍵盤,這個時候我們如果當前頁面最大元素寬高寫的是實際像素,那是沒有問題的,但是如果寫的是百分百在安卓機上當前頁面就會被向上壓縮,但
解決安卓手機鍵盤彈出時會把背景或百分比定位的布局壓縮的問題
div 而且 log 案例 問題 class 背景圖 不同 fixed 做移動端頁面時經常遇到以下案例,在有背景的頁面上寫表單,而且底部為了適應不同手機還得運用絕對定位,因為通常是把容器高度設為了100%,這時在安卓手機上彈窗軟鍵盤時就會把背景圖片及其他東西擠壓上去,解決方
解決ios呼叫原生鍵盤把底部內容往上頂問題
現象:input表單輸入時,調取原生鍵盤把底部position:absolute;內容往上頂了 問題產生原因:彈出鍵盤使網頁脫離文件流的螢幕高度變小 解決方案: 1、使用常規佈局,重新佈局被頂內容,放回文件流---比如修改position:absolute;為posution:relat
Android開發——相簿拍照_03.解決相機拍照之後部分手機無法將圖片儲存到路徑或部分手機點選相機確定無法返回問題
之前用了02的方法,實現了相簿拍照功能,但是在測試的時候發現幾個問題:1.拍完照片之後,返回介面,但是顯示出來的圖片為null,一片空白;2.拍完照片之後,點選相機的確定鍵,無法返回。 因為時間有限,網上的回答很多,第一個問題有人說部分手機沒有SD卡?第二個問
IOS由於Fastclick導致contentEditable無法聚焦
1. 問題描述 在IOS瀏覽器,用div模擬textarea實現可換行的編輯輸入文字,在Vue條件下加入了fastclick防重點選,fastclick判斷ontouchstart條件看是否是移動端,若是移動端則進行相應的事件繫結,移動端點選觸發的順序ontouchstart => ont
關於 vs 2013出現“在VS2013開啟之前的專案,提示無法載入解決方案中的專案,導致專案無法開啟”的問題解決辦法
關於 vs 2013出現“在VS2013開啟之前的專案,提示無法載入解決方案中的專案,導致專案無法開啟”的問題解決辦法 -前段時間在電腦上安裝了sql server2008 r2,之後因為沒安裝成功又根據網上的辦法對sql server r2進行了完全解除安裝和刪除,反反覆覆好幾次。 有
【我的Android進階之旅】解決魅族手機USB除錯時,無法授權出現“Because an app is obscuring a permission request.”錯誤提示的問題
一、問題描述 今天用一個魅族手機進行USB除錯的時候,一直無法授權USB除錯,除錯授權時出現錯誤提示“Because an app is obscuring a permission request, Settings can’t verify your re
iOS safari瀏覽器上overflow: scroll元素無法滾動bug深究
前情提要 在之前我寫過一篇文章:iOS safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理,這篇文章寫的是,當iOS safari瀏覽器上出現大於父容器的svg元素,想給父容器加上overflow: scroll實現內部滾動效果而失敗
解決ios軟鍵盤彈起遮蓋住底部輸入框的問題(終極解決方案!!!絕對好用)
html <div class="layout_flex"> <!-- 頭部 --> <div class="header">header</
解決h5安卓手機軟鍵盤彈起佈局壓縮變形
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://
解決安卓手機下鍵盤彈出導致頁面變形的問題
我們在製作網頁時,如果使用了百分比,在安卓手機下鍵盤彈出時會導致頁面變形。比正常狀態下的頁面是長成這樣的: 但是點選輸入框彈出鍵盤時就變成了這個吊樣:::
iOS下Html頁面中input獲取焦點彈出鍵盤時擋住input解決方案—scrollIntoView()
scrollIntoView(alignWithTop): 滾動瀏覽器視窗或容器元素,以便在當前視窗的可見範圍看見當前元素。 alignWithTop 若為 true,或者什麼都不傳,那麼視窗
解決ios手機頁面overflow scroll滑動很卡的問題
沒有 repo 發現 container rep jpg bug head 上下 解決ios手機頁面overflow scroll滑動很卡的問題 今天在IOS系統上測試 webAPPApp的時候發現使用了position:fixed/absolute時,DIV
js解決手機鍵盤影響定位的問題
其他 問題 func pop var ner pic listen 隱藏 // 滑動其他地方隱藏軟鍵盤document.body.addEventListener(‘touchend‘, function(evt) { document.activeElement.bl
解決 安卓手機 軟鍵盤 彈出布局的問題
bsp doc html document 軟鍵盤 cti nbsp lur script 一、 js <script type="text/javascript">$(‘body,html‘).height(document.body.clientHeig
解決安卓手機上軟鍵盤彈出擠壓背景的問題
彈出 鍵盤 color col 軟鍵盤 func class div res demo: // 解決本頁面軟鍵盤彈窗背景擠壓的問題 var clientHeight = document.documentElement.clientHeight || documen
百度地圖手機端單觸點單擊和長按事件,解決部分手機(小米手機)地圖單擊事件失效,多觸點、拖動依然觸發長按的bug
|| ble apply timeout console dto eat 問題 int /** * Author 嶽曉 * * 對百度地圖的事件擴展,目前擴展了fastclick和longclick, * 解決某些設備click不執行的問題