1. 程式人生 > >移動web頁面,input獲取焦點彈出系統虛擬鍵盤時,擋住input的解決方案

移動web頁面,input獲取焦點彈出系統虛擬鍵盤時,擋住input的解決方案

移動頁面寫定位時不用fixed定位
const brand = navigator.userAgent.indexOf(‘Android’)
if (brand > -1) {
const maxHeight = document.body.clientHeight
window.addEventListener(‘resize’, function () {
const presentHeight = document.body.clientHeight
if (document.activeElement.tagName === ‘INPUT’ || document.activeElement.tagName === ‘TEXTAREA’) {
if (presentHeight < maxHeight) {
// 隱藏底部導航
document.getElementById(‘footer’).style.display = ‘none’
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded()
document.scrollIntoView(true)
}, 100)
} else {
document.getElementById(‘footer’).style.display = ‘flex’
}
}
})
}

相關推薦

移動web頁面input獲取焦點系統虛擬鍵盤擋住input解決方案

移動頁面寫定位時不用fixed定位 const brand = navigator.userAgent.indexOf(‘Android’) if (brand > -1) { const maxHeight = document.body.cl

iOS下Html頁面input獲取焦點鍵盤擋住input解決方案—scrollIntoView()

scrollIntoView(alignWithTop): 滾動瀏覽器視窗或容器元素,以便在當前視窗的可見範圍看見當前元素。 alignWithTop 若為 true,或者什麼都不傳,那麼視窗

Solution of issue: Android soft keyboard overlap with input div on browser【Android虛擬鍵盤與輸入框重疊解決方案

Android soft keyboard overlap with input div on browser 【Android虛擬鍵盤與輸入框重疊】 給個英文標題,因為我知道絕大部分人搜資料都用英文搜。 問題: 在Android裝置瀏覽器上開啟自己的頁面,當點選頁面底部的輸入框時,虛擬

webview的input輸入框獲取焦點數字鍵盤

其實專案是後臺專案,給移動端做的html介面,以前一直做前臺,知道IOS,Android都能設定鍵盤彈出方式,也學過java web 結果當時就沒想到,額. 平時input type="text" 都是這樣寫,彈出的不是數字鍵盤, 如果彈出數字鍵盤只需要改type即可

Android 禁止Edittext系統鍵盤 的幾種方法

第一種方法:在XML檔案下新增: android:focusable="true" android:focusableInTouchMode="true" 第二種方法:直接關閉輸入法 在onC

解決input獲取焦點輸入法之後input被遮擋的問題

關於input輸入框fixed在視窗底部的時候,input獲取焦點,彈出輸入法,input會被輸入法遮擋,導致輸入內容不方便。 我們可以用scrollIntoView 與 scrollIntoView

移動解決fixed和input獲取焦點鍵盤影響定位的問題

場景描述, 當document的高度不夠window的高度時候,如在ip6中文件的高度比窗體的高度小,到底設計在最下方的區域沒有在窗體最下方,就留有空白地方如下圖的灰色部分 1、 解決初始化文件高度,讓文件高度等於窗體高度,並fixed需要定位的區域在最下方(functi

移動端fixed和input獲取焦點鍵盤影響定位的問題

在移動端使用fixed將按鈕定位在底部時,當input獲取焦點彈出軟鍵盤時,在安卓系統會獎底部的按鈕頂上去 // 檢測瀏覽器的resize事件,當高度過小時就可以判定為出現這種情況,這時把定位改成ab或者直接隱藏掉之類的。 var h = document.body.sc

element 中點選table中的某一行使對應行中的Input獲取焦點

css中使inputh獲取焦點的方法是: autofocus='true' 在專案中點選table表格中的行,使input獲取焦點 element中table點選行的事件 @row-click="c

input獲取焦點頁面自動滾動

微信下測試無問題 /*監聽input狀態,螢幕滾動到input,上下居中 *在安卓手機上螢幕尺寸變化會產生resize事件。所以監聽resize事件。 *然後定位到input框。 */ window.addEventListener('resize', functio

bootstrap-modal:modalinput的checked的狀態無法改變 | | input獲取焦點不生效

1.每次彈出modal時 ,用 js 修改的 checked 狀態不能實時更新 <div class="modal fade" tabindex="-1" role="dialog">

ios 固定定位 input獲取焦點ios 滾動條滾動 fixed固定定位失效位置偏移

http://efe.baidu.com/blog/mobile-fixed-layout/還發現一個問題就是ios input設定readonly  還是能看到游標,然後解決方法是在行內寫了onfoc

h5 ios微信瀏覽器 input獲取焦點收起軟鍵盤光標錯位

分享 input info 產生 put 進行 元素 內容 lex 整個頁面布局如下: 外層設置fixed的原因是不讓頁面在瀏覽器中進行上下拖拽, 最後形成的結果是:輸入框獲取焦點輸入內容後,光標錯位,導致不能選中輸入框重新獲取焦點(頁面上移,但是布局未產生影響);

修改input獲取焦點背景黃色

clas 焦點 log class box fill true ado port input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }   修改in

去除input邊框 input去除邊框 去除input獲取焦點的藍色外邊框

wid TE :focus 技術 In code AC border spa 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="

在vue專案中引用element-ui 讓el-input 獲取焦點的方法

在製作專案的時候遇到一個需求,點選一個按鈕彈出一個input輸入框,並讓輸入框獲得焦點,專案中引用了element-ui 在網上查找了很多方法,但是在實際使用中發現了一個問題無論是使用$ref獲取input元素然後使用focus方法還是使用餓了麼元件自帶的autoFocus都只有在第一次點選按鈕的時候可以讓

關於手機端input獲取焦點呼起鍵盤背景圖片擠壓解決方案

1、解決圖片擠壓問題 可以將背景圖片height: 100%改為min-height:100%即可 2、解決android下鍵盤不遮擋input輸入框 // 處理android 下鍵盤遮擋input let ua = window.navigator.userAgent

微信公眾號頁面禁止長按系統選單相容ios和安卓

最近做的一個微信公眾號需求,需要長按撥出有刪除按鈕的浮層,可是長按的時候也會彈出系統選單“選擇複製”和“在瀏覽器開啟”,這裡記錄一下解決方案。 css程式碼如下: cssSelect{ //這裡為css選擇器 -webkit-touch-callout:non

針對iframe層 層在top區域關閉重新整理iframe頁面

$(document).contents().find("iframe")[0].contentWindow.$("form").submit(); 在iframe頁面 定義一個form表單,關閉時 間接提交form。 $(document).contents().find("ifr

移動web頁面前端開發總結

工作筆記:移動web頁面前端開發總結  轉載來源:http://www.cnblogs.com/gyjWEB/p/3780374.html 移動web在當今的發展速度是一日千里,作為移動領域的門外漢,在這段時間的接觸後,發現前端開發這一塊做一個小小的總結。 1.四大瀏覽器核心 1.Trident (IE