// 解決ios下軟鍵盤關閉后頁面位置出錯的問題
function isWeiXinAndIos() {
// window.navigator.userAgent屬性包含了瀏覽器類型、版本、操作系統類型、瀏覽器引擎類型等信息,這個屬性可以用來判斷瀏覽器類型
let ua = '' + window.navigator.userAgent.toLowerCase()
// 通過正則表達式匹配ua中是否含有MicroMessenger字符串且是IOS系統
let isWeixin = /MicroMessenger/i.test(ua) // 是在微信瀏覽器
let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系統
return isIos
}
// 兼容部分ios手機input失焦后頁面上移問題
let myFunction
let isWXAndIos = isWeiXinAndIos()
if (isWXAndIos) { // 既是微信瀏覽器 又是ios============(因為查到只有在微信環境下,ios手機上才會出現input失去焦點的時候頁面被頂起)
document.body.addEventListener('focusin', () => { // 軟鍵盤彈起事件
clearTimeout(myFunction)
})
document.body.addEventListener('focusout', () => { // 軟鍵盤關閉事件
clearTimeout(myFunction)
myFunction = setTimeout(function () {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })// 重點 =======當鍵盤收起的時候讓頁面回到原始位置(頂部)
}, 200)
})
}
ios在微信瀏覽器當中input框失去焦點時,軟鍵盤消失,但是頁面會被頂起 @劉?
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
推薦閱讀更多精彩內容
- H5微信頁面開發,軟鍵盤彈起后,若原輸入框被遮擋,頁面整體將會上移,然而當輸入框失焦,軟鍵盤收起后,頁面未恢復,導...
- IOS設備中的微信內部瀏覽器 html: JS: focus:function() { this.scro...
- 這個問題安卓和iOS端 出現的情況不一樣,安卓的話會遮住input 框 這時候用到一個方法很給力 function...
- 1.Q:安卓機上1像素邊框問題 A:引入一個border.css(如有需要可以私聊我) 2.Q:安卓機上input...