Question

我正在尝试在我的网站上实现一个固定的浮动面板，它使用登录表单加载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事件，以便正确地缩放浮动面板。这导致焦点丢失在firefox的每一个“变焦焦点”上（可能是一个错误？）。解决方案是在输入元素被聚焦时避免面板缩放。

Firefox mobile阻止iframe内的输入

1 个答案: