Foundation6透露彈出式窗體字段不需要的焦點丟失（在jQuery事件？）

我使用Foundation6透露編碼彈出窗體。我遇到的JavaScript問題我跟蹤到的可能與jQuery.js/Foundation.js事件綁定或處理有關。Foundation6透露彈出式窗體字段不需要的焦點丟失（在jQuery事件？）

當我點擊文本字段（或任何其他字段）在顯示窗口中的域獲得焦點，然後顯示窗口快速隱藏，並再次顯示和場已失去焦點。揭開窗口也改變了它在屏幕上的位置。只有訪問文本字段的方法是使用tab鍵。

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.css"/>  
     <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body> 
     <section class="container clearfix"> 
      <h3>Click button to open modal and test focus lost problem:</h3> 
      <p><a href="modalform.html" class="button" data-open="newFormModal" data-showloading="1">Test focus modal form</a></p> 
     </section> 
     <div class="reveal" id="newFormModal" data-reveal data-close-on-click><section class="modalContent"></section><button class="close-button" data-close aria-label="Close reveal" type="button"><i class="fi-x"></i></button></div> 
    </body> 
</html>

modalform.html

<h3 class="modalheader">PopupForm</h3> 
<form method="post" accept-charset="utf-8" class="ajaxModal" data-showloading="1" data-open="newFormModal" action="/test/modalform3"> 
    <div style="display:none;"><input type="hidden" name="_method" value="POST" /></div> 
    <div class="input text"><label for="ga-20x28">Product 1 qty:</label><input type="text" name="ProductQuantities[726][value]" id="ga-20x28" value="0" /></div> <input type="hidden" name="ProductQuantities[726][name]" value="GA 20x28" /> 
    <div class="input text"><label for="ga-30x40">Product 2 qty:</label><input type="text" name="ProductQuantities[727][value]" id="ga-30x40" value="0" /></div> <input type="hidden" name="ProductQuantities[727][name]" value="GA 30x40" /> 
    <div class="input text"><label for="ga-50x70">Product 3 qty:</label><input type="text" name="ProductQuantities[728][value]" id="ga-50x70" value="0" /></div> <input type="hidden" name="ProductQuantities[728][name]" value="GA 50x70" /> 
<button type="submit">Next</button> 
</form> 
<button data-close="" class="refreshId" type="submit">Close</button>

app.js：

$(document).ready(function() { 

    $(document).foundation(); 

    $("body").on("click", "a[data-open]", function(e) { 
     e.preventDefault(); 

     var $this = $(this); 
     var modalName = $this.data("open"); 
     var $modal = $("#" + modalName); 
     var $target = $modal.children(".modalContent"); 
     var requestUri = $(this).attr('href'); 
     var requestData; 
     var method; 
     if($this.attr('data-request')) { 
      requestData = $(this).data("request"); 
      method = 'POST'; 
     } else { 
      requestData = ""; 
      method = 'GET'; 
     } 


     // Load content: 
     var request = $.ajax({ 
      url: requestUri, 
      method: method, 
      data: requestData, 
      dataType: "html", 
      timeout: 60000 
     }); 

     request.done(function(response) { 
      $target.html(response); 
      $target.foundation(); 
     }); 
    }); 
});

在這裏，您可以測試行爲（在我的瀏覽器至少火狐& Chrome）：[http://codepen.io/repeat_spacer/pen/bBRZKd][1]。從按鈕打開顯示彈出窗口並嘗試更改任何文本字段的值。用鼠標點擊進入該區域是不可能的。

希望有人能指出我的問題或如何繼續追蹤它。

UPDATE：

我打掃modalform.html代碼（有一些Ajax揭示承載新的形式的東西，我有阿賈克斯負載下一個表格）。所以現在「加載下一個表格」功能不起作用，但另一方面，「焦點丟失」行爲消失了。

modalform_updated.html：

<h3 class="modalheader">PopupForm</h3> 
<form method="post" accept-charset="utf-8" class="ajaxModal" action="submitmodal.php"> 
    <div style="display:none;"><input type="hidden" name="_method" value="POST" /></div> 
    <div class="input text"><label for="p1qty">Product 1 qty:</label><input type="text" name="ProductQuantities[p1][value]" id="p1qty" value="0" /></div> 
    <div class="input text"><label for="p2qty">Product 2 qty:</label><input type="text" name="ProductQuantities[p2][value]" id="p2qty" value="0" /></div> 
    <div class="input text"><label for="p3qty">Product 3 qty:</label><input type="text" name="ProductQuantities[p3][value]" id="p3qty" value="0" /></div> 
    <button type="submit">Submit</button> 
</form> 
<button data-close="" class="refreshId" type="submit">Close</button>

更新codepen： http://codepen.io/repeat_spacer/pen/MbrYvj

更新2：

這裏是形式爲什麼我的數據開放（基礎顯示開放屬性）的原因屬性。這似乎是導致行爲的原因，當點擊表單中的字段時，會觸發Foundation Open事件。所以快速修復會將其過濾出一些骯髒的方式。

這裏是小提琴手與多彈出功能，我想有：http://codepen.io/repeat_spacer/pen/JbMdPm（第一彈出模態AJAX負載下一個彈出同一內容模式）

來源

2016-11-28 Repeat Spacer

投票的原因是什麼？ –

可能因爲你的問題沒有遵循http://stackoverflow.com/help/how-to-ask well – GillesC

@GillesC那麼現在好嗎？ –

好吧，我現在懂了工作之前已經打開。像想知道這個問題是在基金會事件綁定。

我在想一些奇特的共性，當我加入data-open="modalName"形式屬性，以表明其模式我想Ajax加載下一個模態頁面（就像我需要在第一個按鈕做揭示模態窗口）

現在，當data-open處於表單屬性中時，每觸動一次窗體中的某項就會觸發顯示打開事件。該事件將關閉所有顯示，然後在數據打開屬性中打開帶ID的顯示，並導致失去焦點。

我現在將模態名稱保存到data-modalname，並且所有內容都按預期工作。

HTML修改：

<form method="get" accept-charset="utf-8" class="ajaxModal" data-showloading="1" data-modalname="this" action="modalform2.html">

然後改變事件處理程序中JS從那裏讀出模式的名稱。

Working CodePen：http://codepen.io/repeat_spacer/pen/QGazJj

來源

2016-12-02 10:57:09

我深入瞭解這一點，我認爲你的推理是正確的。在表單上打開數據會導致觸發打開表單的任何點擊。 – kball

我相信你運行到這裏的問題是，您將事件處理程序放置在body上，這意味着每次單擊頁面中的任何內容時它都會運行。點擊揭密內容會觸發你的事件處理程序，它重新打開揭示模式，從而與你的焦點相混淆。

要解決此問題，請將您的點擊處理程序分配給頁面上的其他內容。或者，如果你真的想擁有它的身體，做一些事情，以檢查是否沒有透露我們的觸發下......一拉

$("body").on("click", "a[data-open]", function(e) { 
    if($('body').hasClass('is-reveal-open')) { return; } 
    // rest of handler 
}

來源

2016-12-01 19:16:41 kball

感謝您的建議。我在事件處理中看到的.on通常綁定到body或整個文檔。這個想法是，它也將綁定到動態添加元素（通過JavaScript等文件加載後）。此事件僅在單擊身體標記內具有數據屬性「數據打開」的錨點時觸發。所以點擊revel字段時不會觸發。 –

Foundation6透露彈出式窗體字段不需要的焦點丟失（在jQuery事件？）

回答

相關問題