[英]Foundation6 reveal popup form field unwanted focus lost (in jQuery events?)
我正在使用Foundation6揭示代碼編碼彈出表單。 我遇到的JavaScript問題可能與jQuery.js / Foundation.js事件綁定或處理有關。
當我單擊顯示窗口中的文本字段（或其他任何字段）時，該字段將獲得焦點，然后顯示窗口迅速隱藏並再次顯示，並且該字段失去了焦點。 顯示窗口還會更改其在屏幕上的位置。 訪問文本字段的唯一方法是使用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] 。 從按鈕打開顯示彈出窗口，然后嘗試更改任何文本字段的值。 單擊鼠標無法輸入該字段。
希望有人可以指出我的問題或如何繼續查找它。
更新：
我清理了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>
更新的Codepen： http ：//codepen.io/repeat_spacer/pen/MbrYvj
更新2：
這就是為什么我在表單屬性中具有數據開放（Foundation Reveal開放屬性）的原因。 單擊表單中的字段時，這似乎是導致觸發Foundation Open事件的行為的原因。 因此，快速修復將以某種骯臟的方式將其過濾掉。
這是我想要的具有多彈出功能的提琴手： http : //codepen.io/repeat_spacer/pen/JbMdPm （第一個彈出模式Ajax以相同模式加載下一個彈出內容）
好吧，我現在開始工作了。 想知道問題出在基金會事件綁定中。
當我在表單屬性中添加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中更改事件處理程序以從那里讀取模式名稱。
工作CodePen： http ://codepen.io/repeat_spacer/pen/QGazJj
我相信您遇到的問題是您將事件處理程序放在body ，這意味着每次單擊頁面中的任何內容時，事件處理程序都將運行。 在顯示中單擊將觸發事件處理程序，事件處理程序將重新打開顯示模態，從而使您的焦點混亂。
要解決此問題，請將點擊處理程序分配給頁面上的其他內容。 或者，如果您真的想將其戴在身上，請在觸發它之前進行一些檢查以檢查其是否已打開...
$("body").on("click", "a[data-open]", function(e) {
if($('body').hasClass('is-reveal-open')) { return; }
// rest of handler
}
在字段模糊/焦點丟失時使用jQuery更新表單字段上的錯誤樣式
[英]Update error styling on form fields with jQuery on field blur/focus lost
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.