Firefox移動防止內部iframe輸入

我想實現一個固定的浮動面板在我的網站加載一個iframe與登錄窗體。它似乎工作正常，除了firefox移動（防火牆桌面工作正常），每一個手機瀏覽器，防止各種輸入。
當我嘗試在iframe中寫入一個表單（在android 6.0.1上有股票鍵盤）時，它似乎緩衝了文本，但輸入元素上沒有任何內容出現。此外，當我點擊我的iframe之外的任何輸入字段時，之前寫入的全部文本都會附加到此字段中。

Firefox移動防止內部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手機的奇怪行爲？謝謝！

來源

2016-03-15 MrDeepPurple

最終我得到了一個解決方案。在我們的例子中，我們重寫每個輸入焦點觸發的onResize事件，以便正確縮放浮動面板。這導致焦點丟失在Firefox上的每個「焦點放大」上（一個bug可能？）。解決方案是避免面板縮放，如果一個輸入元素被聚焦。

來源

2016-03-17 16:31:05 MrDeepPurple

我有完全相同的問題，這對我幫助很大！如何實現「如果輸入元素被聚焦，避免面板縮放」？ – danpaz

在我的情況下，在輸入容器上使用了比例函數。從onResize中刪除「scale」解決了我們的問題。無論如何，我們使用onScroll在移動設備上正確縮放面板（當您使用縮放縮放時，您可以滾動內容，因此onScroll可以用於某種「onZoom」事件）。我希望這會對您有所幫助 – MrDeepPurple

Firefox移動防止內部iframe輸入

回答

相關問題