資訊專欄INFORMATION COLUMN
摘要：解決方法如果使用頁面數(shù)據(jù)不超過一屏禁止?jié)L動，那么即使變成了頁面也不會有什么變化。
作者：@micky思 @wupq @yewq
在H5的開發(fā)中，個人的制作頁面布局習性不同，多多少少會產(chǎn)生在真機上input的光標和鍵盤的彈出會出現(xiàn)的各種BUG，文中整理了部分遇到的問題，歡迎新增
ios移動端輸入框上浮導致輸入位置偏移
問題原因：遮罩層定位為fixed，當鍵盤彈起時，ios11以及以下視口計算有問題，頁面的fixed會失效，變成absolute，結(jié)果就是當屏幕數(shù)據(jù)超過一屏時，滑動頁面，input框也會跟著一起滾動導致光標不跟隨密碼彈出框移動。
解決方法：如果使用頁面數(shù)據(jù)不超過一屏（禁止?jié)L動），那么即使變成了absolute頁面也不會有什么變化。
//在彈窗出現(xiàn)的事件里加入
$(".wrap").css("height","100%");//wrap為包含除彈窗外的所有頁面元素的父div
//關閉彈窗時div恢復原來高度
$("body").on("click",".pop_close",function(){
$(".wrap").css("height","24.69rem");
});
//ps：如果整體背景圖是在父元素wrap里，background-size：cover
微信輸入法鍵盤彈起H5頁面無法還原
//判斷ios系統(tǒng)
var u=navigator.userAgent;
if(u.indexOf("iPhone")>-1){
var flag;
$("body").on("focus","input",function(){
flag=false;
});
$("body").on("blur","input",function(){
flag=true;
setTimeout(function(){
if(flag==false){
return false;
}else{
document.body.scrollTop=document.body.scrollTop;
}
//防止在多個input間切換時做過多操作
},0);
//解決select導致的鍵盤彈起
$(".select").on("click",function(){
document.body.scrollTop = document.body.scrollTop;
});
});
}
readonly時，IOS會出現(xiàn)光標和輸入提示
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105676.html
摘要：解決方法如果使用頁面數(shù)據(jù)不超過一屏禁止?jié)L動，那么即使變成了頁面也不會有什么變化。 作者：@micky思 @wupq @yewq 在H5的開發(fā)中，個人的制作頁面布局習性不同，多多少少會產(chǎn)生在真機上input的光標和鍵盤的彈出會出現(xiàn)的各種BUG，文中整理了部分遇到的問題，歡迎新增 ios移動端輸入框上浮導致輸入位置偏移 問題原因：遮罩層定位為fixed，當鍵盤彈起時，ios11以及以下...
摘要：解決方法如果使用頁面數(shù)據(jù)不超過一屏禁止?jié)L動，那么即使變成了頁面也不會有什么變化。 作者：@micky思 @wupq @yewq 在H5的開發(fā)中，個人的制作頁面布局習性不同，多多少少會產(chǎn)生在真機上input的光標和鍵盤的彈出會出現(xiàn)的各種BUG，文中整理了部分遇到的問題，歡迎新增 ios移動端輸入框上浮導致輸入位置偏移 問題原因：遮罩層定位為fixed，當鍵盤彈起時，ios11以及以下...
摘要：初步理解如果最近打電話給武漢的小伙伴，他說信號不好，那么相信我，他肯定不是真的信號不好，也不是不想和你說話，而是他可能在冰箱里。。。 初步理解 如果最近打電話給武漢的小伙伴，他說信號不好，那么相信我，他肯定不是真的信號不好，也不是不想和你說話，而是他可能在冰箱里。。。武漢的天氣從來都是喜怒無常的，是吧，屌絲氣十足，今年也是絲毫看不出有任何逆襲的跡象和可能性，當然咱也沒必要去操那個心；好...
摘要：前言居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。 我們主要從這幾個方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...
閱讀 3058·2021-09-10 10:50
閱讀 3245·2019-08-30 14:19
閱讀 3577·2019-08-29 17:31
閱讀 3393·2019-08-29 16:43
閱讀 2262·2019-08-29 14:05
閱讀 2156·2019-08-29 13:17
閱讀 2106·2019-08-26 13:25
閱讀 1831·2019-08-26 12:20
