如何避免Android键盘在我点击输入后自动关闭？

Posted 2023-02-23

【中文标题】如何避免Android键盘在我点击输入后自动关闭？

【英文标题】：How to avoid the Android keyboard is closed automatically after I click on an Input to type on it?

【发布时间】：2021-08-20 08:31:39

【问题描述】：

直到最近，我的 PWA 几年来一直运行良好。现在，键盘似乎出现了新问题，因为我根本无法输入任何内容。

在我看来，我的错误与另一个众所周知的问题有关：“当我们打开键盘时，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.innerHeightpx`;
        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 = `$cHeightpx`;
            , 100);
        , 100);
     else 
        let sContainer = document.getElementById('superContainer');
        sContainer.style.height = `$window.innerHeightpx`;
        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 年以来，Chromium 中已提出关于 adjustNothing 的这一点。

我也尝试在 CSS 中设置 min-height 等于窗口高度，但并没有改变问题。

此外，我尝试了另一种使控件浮动的疯狂想法，但没有奏效：

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

主要来源部分在这里：

index.html timer.js

知道如何解决这个奇怪的问题吗？

附注：

这是一个Android 特有的错误，因为在 ios 和 Windows 10 上，PWA 运行良好。毕竟，视图没有调整大小。

【参考方案1】：

我通过以下方式修复了它：

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 = `-$ypx`;
    );
    
    txtSpeaker.addEventListener("onblur", function() 
        document.body.marginTop = '0px';
    );

函数androidOrIOS基于https://***.com/a/51911220/1928691。