Javascript 如何避免Android键盘在我点击输入后自动关闭?
直到最近几年,我的PWA一直运转良好。现在,键盘似乎出现了一个新问题,因为我根本无法键入任何内容 在我看来,我的bug与另一个众所周知的问题有关:“当我们打开键盘时,Web应用程序的大小会违背我们的意愿。”(我想知道Twitter有什么作用,因为当我点击输入时它不会调整大小) 这是我的一些代码。我写下了他们试图阻止应用程序调整大小: HTML:Javascript 如何避免Android键盘在我点击输入后自动关闭?,javascript,android,webview,android-softkeyboard,google-chrome-android,Javascript,Android,Webview,Android Softkeyboard,Google Chrome Android,直到最近几年,我的PWA一直运转良好。现在,键盘似乎出现了一个新问题,因为我根本无法键入任何内容 在我看来,我的bug与另一个众所周知的问题有关:“当我们打开键盘时,Web应用程序的大小会违背我们的意愿。”(我想知道Twitter有什么作用,因为当我点击输入时它不会调整大小) 这是我的一些代码。我写下了他们试图阻止应用程序调整大小: HTML: <meta name="viewport" content="width=device-width, initia
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
window.onresize = function() {
resizeScreen();
};
function resizeScreen() {
let scaleVal = window.innerHeight / 600;
if (window.innerHeight < 514) {
if (externalContainer === null) {
let bodyTmp = document.body;
let divTmp = document.createElement("div");
divTmp.id = 'externalContainer';
bodyTmp.insertBefore(divTmp, bodyTmp.firstChild);
}
externalContainer = document.getElementById('externalContainer');
let sContainer = document.getElementById('superContainer');
externalContainer.append(sContainer);
externalContainer.style.height = `${window.innerHeight}px`;
sContainer.style.transformOrigin = "50% 0% 0px";
setTimeout(function() {
sContainer.style.transform = `scale(${scaleVal})`;
setTimeout(function() {
let cHeight = (1 + scaleVal) * window.innerHeight;
if (cHeight < 514)
cHeight = 514;
sContainer.style.height = `${cHeight}px`;
}, 100);
}, 100);
} else {
let sContainer = document.getElementById('superContainer');
sContainer.style.height = `${window.innerHeight}px`;
sContainer.style.transformOrigin = "50% 0% 0px";
setTimeout(function() {
sContainer.style.transform = `scale(${scaleVal})`;
}, 100);
setTimeout(function() {
if (cmbSpeechType.getBoundingClientRect().width > window.outerWidth)
sContainer.style.transform = `scale(${scaleVal - (scaleVal - cmbSpeechType.getBoundingClientRect().width / window.outerWidth)})`;
}, 100);
}
}
您可以在此处查看完整的源代码:
此外,以下是应用程序:
主要来源部分如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
window.onresize = function() {
resizeScreen();
};
function resizeScreen() {
let scaleVal = window.innerHeight / 600;
if (window.innerHeight < 514) {
if (externalContainer === null) {
let bodyTmp = document.body;
let divTmp = document.createElement("div");
divTmp.id = 'externalContainer';
bodyTmp.insertBefore(divTmp, bodyTmp.firstChild);
}
externalContainer = document.getElementById('externalContainer');
let sContainer = document.getElementById('superContainer');
externalContainer.append(sContainer);
externalContainer.style.height = `${window.innerHeight}px`;
sContainer.style.transformOrigin = "50% 0% 0px";
setTimeout(function() {
sContainer.style.transform = `scale(${scaleVal})`;
setTimeout(function() {
let cHeight = (1 + scaleVal) * window.innerHeight;
if (cHeight < 514)
cHeight = 514;
sContainer.style.height = `${cHeight}px`;
}, 100);
}, 100);
} else {
let sContainer = document.getElementById('superContainer');
sContainer.style.height = `${window.innerHeight}px`;
sContainer.style.transformOrigin = "50% 0% 0px";
setTimeout(function() {
sContainer.style.transform = `scale(${scaleVal})`;
}, 100);
setTimeout(function() {
if (cmbSpeechType.getBoundingClientRect().width > window.outerWidth)
sContainer.style.transform = `scale(${scaleVal - (scaleVal - cmbSpeechType.getBoundingClientRect().width / window.outerWidth)})`;
}, 100);
}
}
这是一个特定于Android的bug,因为在iOS和Windows10上,PWA工作正常。毕竟,视图没有调整大小。我通过执行以下操作修复了它:
function androidOrIOS() {
const userAgent = navigator.userAgent;
if(/android/i.test(userAgent)){
return 'android';
}
if(/iPad|iPhone|iPod/i.test(userAgent)){
return 'ios';
}
}
var os = androidOrIOS();
//Only resize if it´s Android
if (os !== "Android") {
window.onresize = function() {
resizeScreen();
};
}
//Change the location of the body based on the location that I "need".
if (os === "Android") {
txtSpeaker.addEventListener("onfocus", function() {
let y = document.getElementById("playControl").getBoundingClientRect().y;
document.body.marginTop = `-${y}px`;
});
txtSpeaker.addEventListener("onblur", function() {
document.body.marginTop = '0px';
});
}
Androidrios的功能基于