如何避免 Android 键盘在我点击输入法后自动关闭?
How to avoid the Android keyboard is closed automatically after I click on an Input to type on it?
我的 PWA 多年来一直运行良好,直到最近。现在,键盘似乎出现了新问题,因为我根本无法输入任何内容。
在我看来,我的错误与另一个 well-known 问题有关:“当我们打开键盘时,Web 应用程序会违背我们的意愿调整大小。” (我想知道 Twitter 是怎么做的,因为当我点击输入时它不会调整大小).
这些是我的部分代码。我写了他们试图阻止调整应用程序的大小:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
Javascript:
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:windowSoftInputMode="adjustNothing"
,但我在 JS 中找不到任何替代方案。我尝试使用 onfocus="window.location.href='#id'; return true;"
来模拟它,但它没有用。自 2014 年以来,关于 adjustNothing
的这一点已在 Chromium 中提出。
我也尝试在 CSS 中设置一个 min-height
等于 window 高度,但它并没有改变问题。
此外,我尝试了另一个让控件浮动的疯狂想法,但没有成功:
txtSpeaker.addEventListener("onfocus", function() {
window.body.style.zIndex = -1;
txtSpeaker.style.zIndex = 1000;
});
txtSpeaker.addEventListener("onblur", function() {
window.body.style.zIndex = "";
txtSpeaker.style.zIndex = "";
});
您可以在此处查看完整的源代码:
https://github.com/FANMixco/toastmasters-timer-material-design
此外,这是应用程序:
https://fanmixco.github.io/toastmasters-timer-material-design
主要源代码部分在这里:
知道如何解决这个奇怪的问题吗?
P.S.:
这是一个 Android-specific 错误,因为在 iOS 和 Windows 10 上,PWA 工作正常。毕竟view没有调整大小
我通过执行以下操作修复了它:
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';
});
}
函数androidOrIOS
基于。
我的 PWA 多年来一直运行良好,直到最近。现在,键盘似乎出现了新问题,因为我根本无法输入任何内容。
在我看来,我的错误与另一个 well-known 问题有关:“当我们打开键盘时,Web 应用程序会违背我们的意愿调整大小。” (我想知道 Twitter 是怎么做的,因为当我点击输入时它不会调整大小).
这些是我的部分代码。我写了他们试图阻止调整应用程序的大小:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
Javascript:
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:windowSoftInputMode="adjustNothing"
,但我在 JS 中找不到任何替代方案。我尝试使用 onfocus="window.location.href='#id'; return true;"
来模拟它,但它没有用。自 2014 年以来,关于 adjustNothing
的这一点已在 Chromium 中提出。
我也尝试在 CSS 中设置一个 min-height
等于 window 高度,但它并没有改变问题。
此外,我尝试了另一个让控件浮动的疯狂想法,但没有成功:
txtSpeaker.addEventListener("onfocus", function() {
window.body.style.zIndex = -1;
txtSpeaker.style.zIndex = 1000;
});
txtSpeaker.addEventListener("onblur", function() {
window.body.style.zIndex = "";
txtSpeaker.style.zIndex = "";
});
您可以在此处查看完整的源代码:
https://github.com/FANMixco/toastmasters-timer-material-design
此外,这是应用程序:
https://fanmixco.github.io/toastmasters-timer-material-design
主要源代码部分在这里:
知道如何解决这个奇怪的问题吗?
P.S.:
这是一个 Android-specific 错误,因为在 iOS 和 Windows 10 上,PWA 工作正常。毕竟view没有调整大小
我通过执行以下操作修复了它:
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';
});
}
函数androidOrIOS
基于。