android移动浏览器中的html输入框打开并快速关闭触摸键盘答案

【问题标题】：html Input box in android mobile browser opens and quickly closed keypad on touchandroid移动浏览器中的html输入框打开并快速关闭触摸键盘
【发布时间】：2019-10-19 12:19:45
【问题描述】：

所以在 iOS 移动浏览器上，没问题。对于我的 android chrome 和三星互联网都这样做。

我有一个打开的 iframe，在 iframe 中有一个输入框，可以输入文本或电话。当我按下它把光标放在那里时，键盘会出现，然后在 1/2 秒内关闭。我删除了所有的 js 和 css，只是做了一个普通的输入框同样的事情。

另外值得注意的是，在桌面视图上似乎没问题。

这是在我的标题中，但除此之外我删除了所有内容

【问题讨论】：

也许 iframe 页面正在执行某种加载活动。尝试像frames[0].onload = function(){ /* run your code in here */}); 那样做你不必使用这种方式来获取 iframe，它必须是页面上的第一个才能工作。当然，您应该知道使用frames[0].contentWindow 访问 iframe 窗口。但是您必须拥有 CORS 访问权限。请记住，动态代码可能必须在您的代码以及任何异步活动运行之前发生。
它在 iphone 和桌面 chrome 移动模拟器上运行良好。如果我把手指放在那里，我可以粘贴到输入框中。
IframeWindow.Element.focus()

标签： javascript android html google-chrome

【解决方案1】：

出现问题是因为我有一些 javascript 在它处于横向模式时会关闭 iframe。这可能是一个错误，因为我从未将其置于横向模式，不知何故键盘会触发它。

现在对于某些设备，由于某种原因，当键盘打开时它认为它处于横向模式（我在 note 9，非常常见的设备）。

这是杀死它的代码，我会修复它

if (isMobile) {
    function orientationPortraitListener(mql) {
        if (mobileModalIframe) {
            if (mql.matches) {
                mobileModalIframe.style.display = 'block';
            } else {
                mobileModalIframe.style.display = 'none';
            }
        }
    }

    //orientationMediaQueryList = matchMedia("(orientation: portrait)"); //This will fail
    orientationMediaQueryList = matchMedia("screen and (max-aspect-ratio: 13/9)"); //this is the fix
    orientationPortraitListener(orientationMediaQueryList);
    orientationMediaQueryList.addListener(orientationPortraitListener);
}

【讨论】：