資訊專欄INFORMATION COLUMN
摘要：當在移動端按鈕底部固定定位后，當喚起鍵盤輸入數(shù)據(jù)時就會出現(xiàn)很頭疼的問題固定在底部的按鈕會被系統(tǒng)自帶的鍵盤擠上去，占用輸入框位置如圖怎么樣才能讓按鈕固定底部，后面找到了兩種方式。第二種需要了解通過方法觸發(fā)事件，或規(guī)定當發(fā)生事件時運行的函數(shù)。
當在移動端按鈕position:fixed;底部bottom:0;
固定定位后，當喚起鍵盤輸入數(shù)據(jù)時就會出現(xiàn)很頭疼的問題：
固定在底部的按鈕會被系統(tǒng)自帶的鍵盤擠上去，占用輸入框位置；
如圖：
怎么樣才能讓按鈕固定底部，后面找到了兩種方式。
HTML
css
.submit {
display: flex;
width: 100%;
justify-content: center;
position: fixed;
bottom: 0;
}
1.第一種
通過輸入框input獲取焦點/移除焦點 來控制按鈕的position樣式；
js
$("input,textarea").focus(function(){
$(".submit").css("position","static");
}).blur(function(){
$(".submit").css("position","fixed");
});
效果是實現(xiàn)了，但是后面發(fā)現(xiàn)一個問題，如圖：
會發(fā)現(xiàn)按鍵沒有顯示完整。
2.第二種
需要了解 resize()
通過resize() 方法觸發(fā) resize 事件，或規(guī)定當發(fā)生 resize 事件時運行的函數(shù)。
js
var windheight = $(window).height(); /*未喚起鍵盤時當前窗口高度*/
$(window).resize(function(){
var docheight = $(window).height(); /*喚起鍵盤時當前窗口高度*/
if(docheight < windheight){ /*當喚起鍵盤高度小于未喚起鍵盤高度時執(zhí)行*/
$(".submit").css("position","static");
}else{
$(".submit").css("position","fixed");
}
});
運行后顯示效果
喚起時：
取消時：
這樣就完美解決了類似鍵盤問題，當然這種方式也可以運用到其他場景當中。
前端菜鳥，多多指教
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83509.html
摘要：問題概述問題移動端輸入框鍵盤喚起后定位好的元素跟隨頁面滾動了起來屬性失效了滿屏任性橫飛如下圖問題有第三方輸入法的機還會出現(xiàn)鍵盤彈出延遲，導致普通布局輸入框等位置靠下的被鍵盤擋住如下圖這個完成出來然后鍵盤再頂起完美解決方案在輸入框獲取焦點 問題概述 問題1：H5 web 移動端 輸入框, 鍵盤喚起后fixed定位好的元素跟隨頁面滾動了起來… fixed屬性失效了！滿屏任性橫飛, 如下圖:...
摘要：主要有兩種方式和。的私有標簽，頂端狀態(tài)條的樣式。禁止數(shù)字自動識別為電話號碼，這個比較有用，因為一串數(shù)字在上會顯示成藍色，樣式加成別的顏色也是不生效的。頁面禁止復制選中文本 react 移動端 兼容性問題和一些小細節(jié) 使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...
閱讀 661·2021-10-09 09:41
閱讀 641·2019-08-30 15:53
閱讀 1071·2019-08-30 15:53
閱讀 1207·2019-08-30 11:01
閱讀 1562·2019-08-29 17:31
閱讀 983·2019-08-29 14:05
閱讀 1711·2019-08-29 12:49
閱讀 409·2019-08-28 18:17
