javascript - Firefox 移动版阻止 iframe 内的输入

Question

我正在尝试在我的网站上实现一个固定的 float 面板，该面板加载带有登录表单的 iframe。它似乎适用于所有移动浏览器，除了 Firefox 移动版(Firefox 桌面版运行良好)，它会阻止各种输入。
当我尝试在 iframe 内的表单中编写一些内容(在 android 6.0.1 上使用普通键盘)时，它似乎缓冲了文本，但输入元素上没有出现任何内容。此外，当我单击 iframe 外部的任何输入字段时，之前编写的整个文本都会附加到该字段中。

<img id="logo" src="icons/logo-little-BLACKBACK.png">
<div id="logingeneric" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="generic-dialog">
        <div class="generic-content">
            <div class="generic-header">
                <h4 class="text-center">Login</h4>
            </div>
            <div class="generic-body">
                <form class="form center-block" action="Home.php" method="post">
                    <div class="form-group">
                        <input id="email-field" name="username" class="form-control input-lg input-field" placeholder="Email" type="text">
                    </div>
                    <div class="form-group">
                        <input id="password-field" name="password" class="form-control input-lg input-field" placeholder="Password" type="password">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-lg btn-block" type="submit">Accedi</button>
                    </div>
                </form>
            </div>
            <div class="generic-footer">
                <span class="pull-right" id="registrati">
                    <a href="Register.php">Registrati</a>
                </span>
                <span class="pull-left">
                    <a href="RecoverPassword.php">Password dimenticata?</a>
                </span>
            </div>
        </div>
    </div>
</div>

这是在我的 iframe 中加载的页面正文。如何避免 Firefox 移动版的这种奇怪行为？ 谢谢!

Answer 1

最终我找到了解决方案。在我们的例子中，我们重写在每个输入焦点上触发的 onResize 事件，以便正确缩放 float 面板。这导致 Firefox 上的每次“焦点缩放”都失去了焦点(也许是一个错误？)。 解决方案是在输入元素获得焦点时避免面板缩放。