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事件？）

回答

相关问题