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