팝업에서 스크롤에 초점을 가게 수정하고 싶습니다!
본문
안녕하세요 열심히 공부하다가 부족해서 질문하러 오게 되었습니다,,,
이렇게 팝업창을 띄웠는데 키보드만 사용해서 안에 기능이 다 사용이 되어야하는데
스크롤 기능에 초점이 가지않고, 키보드만 사용시에 스크롤이 불가능하여서 수정하려고 합니다.
스크립트는
function popup() {
$("#Layers").show();
$("body").css("overflow", "hidden");
}
function selectChange() {
$('#paramKey9').val( $('#domain').val() ).val();
}
$("#view_close").click(function () {
$("#Layers").hide();
$("body").css("overflow", "");
});
$("#view_close").focus(function () {
$("#Layers").append("<a href='javascript:void(0);' class='linkAppend'></a>");
$(".linkAppend").focus(function() {
$('#Layers').attr("tabindex", "0").focus();
$(".linkAppend").remove();
});
});
소스 구조는
<div class="Layer l" id="Layers" style="" tabindex="0">
<div class="LY_1">
<div class="Layer_head">
<p>1209121012111213</p>
</div>
<div class="Layer_body">
<p>22222<br>333333333333333</p>
<ul class="mb10">
<li class="mt10 pl16">
<p class="ti16">2222222222222</p>
<ul class="pl8 fs15 thin">
<li class="ti8 mt3">000000</li>
<li class="ti8 mt3">123123123</li>
<li></li>
<li class="ti8 mt3">aaaaaa </li>
</ul>
</li>
<li class="mt10">aaaaaaaaaaaaaaaaaa </li>
<li class="mt10">dadadadada</li>
</ul>
<div class="pl8">
<p class="refer fs13 ti8">123123123123123</p>
<p class="refer fs13 ti8">0564as654d5a6s45as6d4a65sd4a65sd4a65sd4as65d4as5d64as65d5as45d6ad4as6d45</p>
</div>
</div>
</div>
<div class="Layer_close">
<a href="javascript:void(0)" class="bt-close" id="view_close"><span>close</span></a>
</div>
</div>
이렇게 되어있습니다!
많이 부족한데 항상 도움주셔서 감사합니다!
답변 1
※ 팝업이 열릴 때 해당 영역에 초점이 잡히고 키보드로 스크롤이 가능하도록
focus와 keydown 이벤트를 활용해야 합니다.
- 코드 수정을 참고하여 보세요.
function popup() {
$("#Layers").show();
$("body").css("overflow", "hidden");
$("#Layers").attr("tabindex", "0").focus(); // 팝업 열릴 때 초점 설정
}
function selectChange() {
$('#paramKey9').val($('#domain').val()).val();
}
$("#view_close").click(function () {
$("#Layers").hide();
$("body").css("overflow", "");
});
$("#view_close").focus(function () {
$("#Layers").append("<a href='javascript:void(0);' class='linkAppend'></a>");
$(".linkAppend").focus(function () {
$('#Layers').attr("tabindex", "0").focus();
$(".linkAppend").remove();
});
});
// 키보드 이벤트 추가 (위/아래 방향키로 스크롤 가능)
$("#Layers").on("keydown", function (e) {
if (e.key === "ArrowDown") {
this.scrollTop += 20; // 아래로 스크롤
e.preventDefault();
} else if (e.key === "ArrowUp") {
this.scrollTop -= 20; // 위로 스크롤
e.preventDefault();
}
});