![](/img/trans.png)
[英]How to determine if a resize event was triggered by soft keyboard in mobile browser?
[英]Detect when resize event is triggered by the Android browser's on screen keyboard
我有一个使用resize事件的表单,以保持布局与浏览器视口的大小成比例。 我遇到的问题是,当Android浏览器上出现屏幕键盘时,事件会触发。 这会导致表单的布局发生变化,因此输入字段会在浏览器关注后移动。 这使我的应用程序在Android上无法使用。 这不是IOS的问题,因为屏幕键盘似乎是不会触发调整大小事件的叠加层。
有没有办法检测到调整大小事件是由键盘外观引发的?
好的,这是对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
// Indicate normal resize
}
else {
// We know that element who opens keyboard is in 'focus'
// 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;
}
最初尝试通过设置标志来防止:
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.