Foundation 6 显示弹出表单字段不需要的焦点丢失（在 jQuery 事件中？）答案

【问题标题】：Foundation6 reveal popup form field unwanted focus lost (in jQuery events?)Foundation 6 显示弹出表单字段不需要的焦点丢失（在 jQuery 事件中？）
【发布时间】：2016-11-28 10:53:22
【问题描述】：

我正在使用 Foundation6 显示编码弹出表单。我遇到的 JavaScript 问题可能与 jQuery.js / Foundation.js 事件绑定或处理有关。

当我单击显示窗口中的文本字段（或任何其他字段）时，该字段获得焦点，然后显示窗口迅速隐藏并再次显示，并且该字段失去焦点。显示窗口也会改变它在屏幕上的位置。访问文本字段的唯一方法是使用制表键。

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();
        });
    });
});

您可以在这里测试行为（至少在我的浏览器 Firefox 和 Chrome 上）：[http://codepen.io/repeat_spacer/pen/bBRZKd][1]。从按钮打开显示弹出窗口并尝试更改任何文本字段的值。无法通过鼠标点击进入该字段。

希望有人能指出问题或如何继续追踪它。

更新：

我清理了 modalform.html 代码（有一些 ajax 显示加载新表单的东西，我有 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>

更新的代码笔： http://codepen.io/repeat_spacer/pen/MbrYvj

更新 2：

这就是我在表单属性中有数据开放（Foundation Reveal open-attribute）的原因。当单击表单中的字段时，这似乎是触发 Foundation Open 事件的行为的原因。所以快速修复会以一些肮脏的方式过滤掉它。

这是我想要的具有多弹出功能的提琴手：http://codepen.io/repeat_spacer/pen/JbMdPm（第一个弹出模式 ajax 在同一模式中加载下一个弹出内容）

【问题讨论】：

投反对票的原因是什么？
可能是因为你的问题没有跟上stackoverflow.com/help/how-to-ask 好
@GillesC 那么现在可以了吗？
现在我开始找到一些地方了。将代码清理到“绝对”最低限度我设法消除了“失去焦点”的行为。我会尽快更新有问题的代码并codepen。

标签： jquery forms zurb-foundation-6 lostfocus zurb-reveal

【解决方案1】：

好的，我现在开始工作了。就像想知道问题出在 Foundation 事件绑定中一样。

当我在表单属性中添加data-open="modalName" 以指示我希望 Ajax 在哪个模式中加载下一个模式页面时，我正在考虑一些花哨的概括性（就像我需要在第一个按钮中显示模式一样窗口。）

现在当data-open 在表单属性中时，每次单击表单中的某些内容时都会触发显示打开事件。该事件将关闭所有显示，然后在 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 中的事件处理程序以从那里读取模式名称。

工作代码笔：http://codepen.io/repeat_spacer/pen/QGazJj

【讨论】：

我对此进行了更多研究，我认为您的推理是正确的。表单上的 data-open 会导致表单上的任何点击触发打开。

【解决方案2】：

我相信您在这里遇到的问题是您将事件处理程序放在body 上，这意味着每次单击页面中的任何内容时它都会运行。在显示中单击会触发您的事件处理程序，它会重新打开显示模式，从而扰乱您的焦点。

要解决此问题，请将您的点击处理程序分配给页面上的其他内容。或者如果你真的想把它放在身上，在你触发它之前做一些事情来检查它是否已经打开......一个拉

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

【讨论】：

感谢您的建议。我在带有 .on 的事件句柄上看到的通常是绑定到正文或整个文档。这个想法是它还将绑定到动态添加的元素（在文档加载后通过 JavaScript 等）。仅当单击正文标记内具有数据属性“data-open”的锚点时才会触发此事件。所以当点击 revel 中的字段时它不会触发。