1. 首頁
  2. 問答
  3. 彈出窗口內的輸入字段在集中時跳躍

彈出窗口內的輸入字段在集中時跳躍

2016-07-31 55 views
0

我有一個內部有輸入字段的poup。當我使用iPhone或iPad單擊任何輸入字段時，佈局跳轉...您可以在此鏈接中看到這種效果：https://jsbin.com/zebixifami/1彈出窗口內的輸入字段在集中時跳躍

嘗試點擊彈出窗口底部的輸入字段，您將看到混亂，這個混蛋在實際產品中更加突出。

下面是編輯斌網址：https://jsbin.com/zebixifami/edit?html,css,output

這裏是一個視頻的鏈接顯示此問題：https://www.youtube.com/watch?v=LvmAl-HQI8Y&feature=youtu.be

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
</div> 
<div class="popup"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
</div> 

</body> 
</html>

CSS：

.popup { 
    position: fixed; 
    top: 50%; 
    left: 5%; 
    width: 90%; 
    -moz-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    max-height: 90%; 
    background: #fff; 
    overflow: auto 
} 

input { 
    width: 90%; 
    margin-left: 5%; 
    display: block; 
    margin-bottom: 20px; 
    margin-top: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    background: #000; 
    oveflow: hidden; 
}

來源

2016-07-31 Imran Bughio

回答

3

事實證明這是一個webkit bug &我們可以做的並不多。

但是我確實發現了一個可以接受的工作。 我最終保持彈出作爲一個普通的文檔流div沒有絕對或固定的位置，而在佈局和彈出之間跳轉的方式，用戶獲得相同的感覺，就好像他是在一個彈出窗口內，下面是一步一步說明我是什麼做：

  • 當彈出被觸發時，保存佈局jQuery('body').scrollTop()的當前滾動位置。
  • 動畫整個頁面出來opacity: 0（整個佈局在一個div中，彈出窗口在它之外）。
  • 將隱藏溢出的佈局高度設置爲0。
  • 在彈出窗口中設置動畫（彈出窗口的位置是靜態的或相對的）
  • 在顯示彈出窗口之前，我們必須跳到頁面頂部。
  • 現在當關閉彈出窗口時做相反的事情。
  • 動畫出來彈出
  • 組佈局的高度來自動
  • 滾動佈局回到我們前面保存先前的位置。
  • 現在我們可以將佈局動畫返回到opacity: 1。

這種一步一步的過渡將讓用戶感覺它是一個彈出式窗口，但我們只是隱藏佈局並顯示另一個類似於彈出窗口的div。

這樣做意味着我們的彈出不再位置固定&該錯誤不會觸發。

演示：JSBIN & Editor

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="wrapper"> 
    <section> 
    <h1>A</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <a href="#" class="js-popup-open">Click me.</a> 
    </section> 
    <section> 
    <h1>B</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <a href="#" class="js-popup-open">Click me.</a> 
    </section> 
    <section> 
    <h1>C</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <a href="#" class="js-popup-open">Click me.</a> 
    </section> 
    <section> 
    <h1>D</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p> 
    <a href="#" class="js-popup-open">Click me.</a> 
    </section> 
</div> 
<div class="popup-wrap"></div> 
<div class="popup"> 
    <a href="#" class="js-popup-close">Close</a> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
</div> 

</body> 
</html>

CSS：

body{ 
    background: #000; 
    padding: 0; 
    margin: 0; 
} 
.wrapper{ 
    background: #fff; 
    margin: 0; 
    padding: 20px; 
} 

.popup { 
    position: relative; 
    top: -5%; 
    opacity: 0; 
    left: 5%; 
    width: 90%; 
    max-height: 90%; 
    background: #fff; 
    overflow: auto; 
    display: none; 

    -webkit-transition: all 0.35s ease-in-out; 
    -moz-transition: all 0.35s ease-in-out; 
    -o-transition: all 0.35s ease-in-out; 
    -ms-transition: all 0.35s ease-in-out; 
    transition:  all 0.35s ease-in-out; 
} 
input { 
    width: 90%; 
    margin-left: 5%; 
    display: block; 
    margin-bottom: 20px; 
    margin-top: 20px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.popup-wrap{ 
    position: absolute; 
    background: rgba(0,0,0,0.75); 
    top: 0; 
    left: 0; 
} 
.popup-on body { 
    oveflow: hidden; 
} 
.popup-on .popup{ 
    display: block; 
} 
.popup-on .wrapper{ 
    overflow: hidden; 
} 
.popup-animate .popup{ 
    top: 5%; 
    opacity: 1; 
}

JS：

$(document).ready(function(){ 

    var currentScrollPosition = 0; 

    // Open Popup 
    $('.js-popup-open').click(function(e){ 
    e.preventDefault(); 

    // Save current popup location. 
    currentScrollPosition = jQuery('body').scrollTop(); 

    // Fadeout layout 
    $('.wrapper').animate({ 
     opacity: 0 
    }, 350, function() { 
     // Hide layout 
     $('.wrapper').css('height', 0); 

     // Show Popup 
     $('body').addClass('popup-on'); 

     // Scroll layout to top so popup is not shown half way through. 
     jQuery('html, body').animate({ 
     scrollTop: 0 
     }, 0); 

     // Animate Popup 
     setTimeout(function(){ 
     $('body').addClass('popup-animate'); 
     }, 10); /* this set timeout let transition be applied even when display property was changed from display none to blcok */ 

    }); 
    }); 

    // Close Poup 
    $('.js-popup-close').click(function(e){ 
    e.preventDefault(); 

    // Animate out the poup 
    $('body').removeClass('popup-animate'); 

    // Wait while popup is animting to fade. 
    setTimeout(function(){ 

     // Hide the popup 
     $('body').removeClass('popup-on'); 

     // scroll to previous position. 
     jQuery('html, body').animate({ 
     scrollTop: currentScrollPosition 
     }, 0); 

     // Layout back to normal height. 
     $('.wrapper').css('height', 'auto'); 

     setTimeout(function(){ 
     $('.wrapper').animate({ 
      opacity: 1 
     }, 350); 
     }, 10); 

    }, 360); 
    }); 
});

來源

2016-08-02 09:34:30

1

似乎固定的位置使問題在這裏，因爲在iphone和ipad上，當你點擊/點擊它時瀏覽器會關注輸入字段（所以瀏覽器會自動生成一個動畫）。 試着這樣做：

<div class="backdrop"> 
    <div class="popup"> 
     <input type="text"> 
     ... 
    </div> 
</div>

和使用CSS的背景：

.backdrop { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

，並在彈出的CSS屬性只是改變位置：固定的位置是：絕對的。

.popup { 
    position: absolute; 
    ... 
}

我希望這可以解決這個問題。

來源

2016-07-31 08:30:30

+0

試了它...沒有工作 - https://jsbin.com/yowiqivowi –

+0

嗯，這確實爲我解決了它。經過iPhone 5，OS 9.3.3 - 9.0 Mobile/13G34 Safari/601.1測試。你有哪個操作系統？ –

+1

我沒有設備，但錯誤肯定來自瀏覽器檢查[this]（https://bugs.webkit.org/show_bug.cgi?id=158276），感謝您的努力，但我相信它無法解決，但我確實使用了我在這裏發佈的工作。 –

相關問題

 相關問題