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