當我們在移動端開發(fā)中，經(jīng)常會遇到需要彈出軟鍵盤的情況。但是如果我們的頁面中有固定在底部的按鈕或者其他元素，軟鍵盤一彈起便會擋住這些元素，非常影響用戶體驗。這時候我們就需要用到j(luò)Query實現(xiàn)軟鍵盤彈起時的圖標功能。

// 監(jiān)聽輸入框的焦點狀態(tài)
$('input').bind('focus', function() {
// 獲取輸入框距離底部的高度
var inputHeight = $(window).height() - $('input').offset().top - $('input').outerHeight();
// 如果輸入框距離底部的高度小于軟鍵盤的高度，則為底部固定元素添加margin-bottom
if (inputHeight < 260) {
$('.fixed-bottom').css('margin-bottom', '260px');
}
});
// 監(jiān)聽鍵盤關(guān)閉事件
$('input').bind('blur', function() {
// 關(guān)閉鍵盤時，移除底部固定元素的margin-bottom
$('.fixed-bottom').css('margin-bottom', '0');
});

上面的代碼就實現(xiàn)了在輸入框獲取焦點時，判斷輸入框距離底部的高度是否小于軟鍵盤的高度，如果是則為底部固定元素添加margin-bottom，防止被軟鍵盤遮擋。同時，在鍵盤關(guān)閉時，又將底部固定元素的margin-bottom移除。

通過這種方式，我們可以有效地解決移動端頁面中軟鍵盤擋住底部固定元素的問題，提升用戶體驗。