3
나는 Foundation6 공개를 사용하여 팝업 폼을 코딩합니다. 내가 추적 한 JavaScript 문제에 직면 해 있습니다. 아마도 jQuery.js/Foundation.js 이벤트 바인딩 또는 처리와 관련이 있습니다. Foundation6 공개 팝업 폼 필드 원하지 않는 포커스 손실 (jQuery 이벤트에서)
내가 텍스트 필드 (또는 다른 필드)의 필드가 포커스를 취득한 후 창 신속하게 숨기고 다시 표시되고 필드가 포커스를 잃은 공개 창을 표시 클릭
. 공개 창은 화면의 위치도 변경합니다. 텍스트 필드에 액세스하는 유일한 방법은 탭 키를 사용하는 것입니다.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 코드를 청소 (나는 아약스로드 다음 형태가 있고, 일부 아약스로드 새로운 형태의 물건을 공개있다). 이제는 "다음 양식로드"기능이 작동하지 않지만 다른 한편으로는 "포커스 손실"동작이 사라집니다.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 : 여기
는 형태 I 데이터 오픈 (재단은 오픈 속성을 밝히기) 한 이유입니다 속성. 폼의 필드를 클릭하면 Foundation Open 이벤트가 트리거되는 원인이되는 것 같습니다. 그래서 빨리 수정하면 더러운 방식으로 필터링됩니다. 여기내가 갖고 싶어 멀티 팝업 기능을 피들러입니다 : 사실 그 http://codepen.io/repeat_spacer/pen/JbMdPm 난 당신이 여기에 실행중인 문제를 생각
아래 투표의 이유는 무엇입니까? –
질문이 http://stackoverflow.com/help/how-to-ask 잘 따르지 않기 때문에 아마도 – GillesC
@ GillesC 그럼 이제 괜찮습니까? –