Androidソフトキーボードを解決して入力ボックスを隠します.
1576 ワード
Androidの携帯電話は入力ボックスをクリックする時、弾むソフトキーボードは入力ボックスを遮るかもしれません.
解決方法は以下の通りです.(すべての入力ボックスはクリック時に以下の方法を呼び出します.)
一、scrollIntoView():現在の要素をブラウザウィンドウの視認エリアにスクロールさせる.
パラメータ:
align Top(Boolean型パラメータ):1.trueであれば、要素の先端はそのスクロールエリアの視認領域の先端に揃えられます.2.falseの場合、要素の底端はそのスクロールエリアの視認領域の底端に揃えられます.
scrollIntoViewOptions(Object型パラメータ)
例
二、Element.scrollIntoViewIfNeed():ブラウザウィンドウの可視領域内にない要素をブラウザウィンドウの可視領域にスクロールするために使用されます.この要素がすでにブラウザウィンドウの可視領域内にある場合、スクロールは発生しません.この方法は標準的なElement.scrollIntoView()方法の固有の変形体である.
解決方法は以下の通りです.(すべての入力ボックスはクリック時に以下の方法を呼び出します.)
focusInput() {
var u = navigator.userAgent;
if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoView(false);//scrollIntoViewIfNeeded()
},0);
}
})
}
},
一、scrollIntoView():現在の要素をブラウザウィンドウの視認エリアにスクロールさせる.
パラメータ:
align Top(Boolean型パラメータ):1.trueであれば、要素の先端はそのスクロールエリアの視認領域の先端に揃えられます.2.falseの場合、要素の底端はそのスクロールエリアの視認領域の底端に揃えられます.
scrollIntoViewOptions(Object型パラメータ)
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}
1.bootleanであれば、trueは{block:「start」に相当します.falseは{block:「end」に相当します.2.behaviorこのオプションでページがどのようにスクロールするかを決定します.autとinstantは瞬間的に該当する位置にジャンプします.smothはアニメーションがあります. 例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});
二、Element.scrollIntoViewIfNeed():ブラウザウィンドウの可視領域内にない要素をブラウザウィンドウの可視領域にスクロールするために使用されます.この要素がすでにブラウザウィンドウの可視領域内にある場合、スクロールは発生しません.この方法は標準的なElement.scrollIntoView()方法の固有の変形体である.