Foundation 6 显示弹出表单字段不需要的焦点丢失(在 jQuery 事件中?)
Foundation6 reveal popup form field unwanted focus lost (in jQuery events?)
我正在使用 Foundation6 reveal 编码弹出表单。我正面临 JavaScript 我追踪到的问题可能与 jQuery.js / Foundation.js 事件绑定或处理有关。
当我在 reveal window 中单击文本字段(或任何其他字段)时,该字段获得焦点,然后 reveal window 快速隐藏并再次显示,该字段失去焦点。 reveal window 也会改变它在屏幕上的位置。访问文本字段的唯一方法是使用 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();
});
});
});
在这里您可以测试行为(至少在我的浏览器 Firefox 和 Chrome 上):[
http://codepen.io/repeat_spacer/pen/bBRZKd][1]
。从按钮打开显示弹出窗口 window 并尝试更改任何文本字段的值。无法用鼠标点击输入字段。
希望有人能指出问题所在或如何继续跟踪它。
更新:
我清理了 modalform.html 代码(有一些 ajax 显示加载新表单的东西,我在那里 ajax 加载下一个表单)。所以现在 "load next form" 功能不起作用,但另一方面 "focus lost" 行为消失了。
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:
这里是我在表单属性中有data-open(Foundation Reveal open-attribute)的原因。这似乎是行为的原因,因为它在单击表单中的字段时触发 Foundation Open 事件。所以快速修复会以某种肮脏的方式过滤掉它。
这是我想要的具有多弹出功能的提琴手:http://codepen.io/repeat_spacer/pen/JbMdPm(第一个弹出模式 ajax 在同一模式中加载下一个弹出内容)
我相信您 运行 遇到的问题是您将事件处理程序放在 body
上,这意味着它将 运行每次单击页面中的任何内容时。在显示中单击会触发您的事件处理程序,它会重新打开显示模式,从而扰乱您的注意力。
要解决此问题,请将您的点击处理程序分配给页面上的其他内容。或者如果你真的想把它放在身上,在你触发它之前做一些事情来检查它是否已经打开......a la
$("body").on("click", "a[data-open]", function(e) {
if($('body').hasClass('is-reveal-open')) { return; }
// rest of handler
}
好的,我现在开始工作了。想知道问题出在 Foundation 事件绑定中。
当我在表单属性中添加 data-open="modalName"
以指示我希望 Ajax 在哪个模态中加载下一个模态页面时,我在想一些奇特的通用性(就像我需要做的那样在显示模式的第一个按钮中 window。)
现在,当 data-open
在表单属性中时,每次单击表单中的内容时都会触发 reveal 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 中的事件处理程序以从那里读取模态名称。
工作 CodePen:http://codepen.io/repeat_spacer/pen/QGazJj
我正在使用 Foundation6 reveal 编码弹出表单。我正面临 JavaScript 我追踪到的问题可能与 jQuery.js / Foundation.js 事件绑定或处理有关。
当我在 reveal window 中单击文本字段(或任何其他字段)时,该字段获得焦点,然后 reveal window 快速隐藏并再次显示,该字段失去焦点。 reveal window 也会改变它在屏幕上的位置。访问文本字段的唯一方法是使用 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();
});
});
});
在这里您可以测试行为(至少在我的浏览器 Firefox 和 Chrome 上):[
http://codepen.io/repeat_spacer/pen/bBRZKd][1]
。从按钮打开显示弹出窗口 window 并尝试更改任何文本字段的值。无法用鼠标点击输入字段。
希望有人能指出问题所在或如何继续跟踪它。
更新:
我清理了 modalform.html 代码(有一些 ajax 显示加载新表单的东西,我在那里 ajax 加载下一个表单)。所以现在 "load next form" 功能不起作用,但另一方面 "focus lost" 行为消失了。
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:
这里是我在表单属性中有data-open(Foundation Reveal open-attribute)的原因。这似乎是行为的原因,因为它在单击表单中的字段时触发 Foundation Open 事件。所以快速修复会以某种肮脏的方式过滤掉它。
这是我想要的具有多弹出功能的提琴手:http://codepen.io/repeat_spacer/pen/JbMdPm(第一个弹出模式 ajax 在同一模式中加载下一个弹出内容)
我相信您 运行 遇到的问题是您将事件处理程序放在 body
上,这意味着它将 运行每次单击页面中的任何内容时。在显示中单击会触发您的事件处理程序,它会重新打开显示模式,从而扰乱您的注意力。
要解决此问题,请将您的点击处理程序分配给页面上的其他内容。或者如果你真的想把它放在身上,在你触发它之前做一些事情来检查它是否已经打开......a la
$("body").on("click", "a[data-open]", function(e) {
if($('body').hasClass('is-reveal-open')) { return; }
// rest of handler
}
好的,我现在开始工作了。想知道问题出在 Foundation 事件绑定中。
当我在表单属性中添加 data-open="modalName"
以指示我希望 Ajax 在哪个模态中加载下一个模态页面时,我在想一些奇特的通用性(就像我需要做的那样在显示模式的第一个按钮中 window。)
现在,当 data-open
在表单属性中时,每次单击表单中的内容时都会触发 reveal 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 中的事件处理程序以从那里读取模态名称。
工作 CodePen:http://codepen.io/repeat_spacer/pen/QGazJj