[英]Prevent document reflow/browser resize when android keyboard opens
This is for a HTML5/Javascript WebApp, not a native android app. 这是针对HTML5 / Javascript WebApp,而不是原生Android应用程序。
How do I prevent the browser/the DOM from resizing my content (which is responsive, mostly vw/vh for sizes etc), when the android soft keyboard opens? 当android软键盘打开时,如何防止浏览器/ DOM调整我的内容大小(响应速度,大多数是大小等vw / vh)? What happens is, the content, especially font sizes, changes once the keyboard is opened (on input fields for example).
发生的事情是,打开键盘后,内容(尤其是字体大小)会发生变化(例如,在输入字段上)。
I already have set 我已经准备好了
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
What I want to achieve is, that the keyboard acts as an overlay and the content underneath becomes scrollable. 我想要实现的是,键盘充当叠加层,下面的内容变得可滚动。 So basically, what
android:windowSoftInputMode
would do in an android manifest. 所以基本上,
android:windowSoftInputMode
会在android清单中做什么。
I also tried listening to the window resize event and prevent it, when the resize amount is in a certain range (see this answer to another question). 当调整大小量在一定范围内时,我也尝试听窗口调整大小事件并阻止它(参见另一个问题的答案 )。 But what happens here, is the keyboard opens and immediatly after closes again.
但这里发生的事情是,键盘打开后立即再次关闭。 (*)
(*)
So my basic ideas are: 所以我的基本想法是:
But I can't figure out a working solution for any of these. 但我无法找到任何这些的工作解决方案。
Ok , this is fix for html5 (browser) app . 好的,这是对html5(浏览器)应用程序的修复。
var isKeyboardOpen = false;
// Override onresize event if you have it already just insert code
// also you can check id of element or any other parameters
if (document.activeElement.tagName == "INPUT" ||
document.activeElement.tagName == "input") {
// regular onresize
}
else {
// avoid resize
}
// To check is it keyboard open use this code
window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);
function keyboardShowHandler(e){
isKeyboardOpen = true; //always know status
}
function keyboardHideHandler(e){
isKeyboardOpen = false;
}
Initially try to prevent by setting the flag : 最初尝试通过设置标志来防止:
var object_ = document.getElementById("IwillOpenKeyboardOnMobile");
object_.addEventListener("focus", ONFOCUSELEMENT);
function ONFOCUSELEMENT() {
isKeyboardOpen = true;
}
// opposite event is blur
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.