手機網頁中輸入框被輸入法遮擋問題

2021-07-04 13:39:34 字數 985 閱讀 5831

之前要做乙個彈出對話方塊,填寫資訊,發現在手機上看的時候,較後的輸入框在填寫資訊時,輸入框被輸入法遮擋,只能盲填。

1.彈出的對話方塊用display:fixed定位的

2.對話方塊大小固定

css部分

(dlg-top與dlg-bottom為對話方塊的類,用於確定對話方塊的定位方式)

.dlg-top

.dlg-bottom

js部分

「deliver-dlg」為對話方塊的類

//彈出對話方塊時,繫結的事件

//繫結輸入框獲取焦點事件

$(".deliver-dlg input,.deliver-dlg textarea").focus(function

() else

});});//取消對話方塊時,取消事件繫結

$(".deliver-dlg input").unbind();

$(".deliver-dlg").removeclass("dlg-bottom").addclass("dlg-top");

$(window).unbind();

簡單點說就是改變對話方塊的定位方式,在預設情況下用top,在有輸入法的時候,根據情況用bottom。

在input獲取焦點且視窗重設的時候(即輸入框彈出),注意先繫結input的focus事件,再繫結視窗改變的事件,因為在手機上,是input獲取焦點,輸入框才彈出導致視窗大小改變。

再視窗大小改變事件發生之後,判斷輸入框是否被遮(即不在視窗的可視範圍內),採用的辦法是用可視視窗的高度($(window).height())是否大於輸入框的底部(input.offset().top+input.offset().height-document.body.scrolltop)因為input.offset().top表示的是元素離文件頭部的位置,要算元素離可視視窗頭部的位置,可以再減去滾動條滾動了多少。以上是判斷元素是否在可視視窗底部。

輸入法遮擋EditText輸入框的問題

一 在清單檔案中對應的activity便簽下新增如下配置 android windowsoftinputmode statevisible adjustresize 二 在對應的activity 中新增如下 getwindow setsoftinputmode windowmanager.layou...

移動端,input輸入框被手機輸入法解決方案

當介面元素靠下時候的時候,input輸入框會被系統的鍵盤遮擋。我們可以讓介面向上移動一定距離去避免遮擋。money click function 300 基於jquery寫的事件。首先繫結觸發元素 input 框,scrollintoview alignwithtop 屬性滾動瀏覽器視窗或容器元素,...

Android輸入框被鍵盤遮擋

解決方案 在我們的linearlayout布局外新增scrollview 示例 由原來的 view plain print?xmlversion 1.0 encoding utf 8 linearlayout xmlns android android layout width fill paren...