새소식
반응형
Programming language/Javascript,jQuery
[jQuery]Bootstrap Modal 사용시 focus()가 안되는 현상
- -
반응형
Bootstrap을 이용해 Modal창으로 기능을 구현하던 중 발견한 버그(?)를 해결하는 법을 포스팅으로 남깁니다.
Modal 창 안에 있는 modal-body(클래스)에 특정 페이지를 load 시킨 다음, 해당 페이지에서 입력창에 포커스를 주고자 했다.
load가 되고 Modal 창이 열리면 위와 같이 창이 뜨면서 포커스가 되야 된다. 그런데 되지 않았다. 정확하게는 첫 오픈시에는 포커싱이 되는데 두번째 오픈부터 되지 않았다...
프로세스는 아래와 같다.
Modal open ☞ A페이지 load ☞ Modal show ☞ A페이지에 $(document).ready(function() { $("#id").focus(); }); 작성
이해가 가지 않아서 다양하게 시도를 해보고 구글링을 했다. 다행히도 나와 같은 상황을 겪은 이들이 있었다.
stackoverflow.com/questions/35758658/bootstrap-modal-focus-not-working
Bootstrap Modal Focus not working
while making a web I didn't get focus in a "input" into Bootstrap Modal, I tried everything and didn't work, modal appears but input doesn't get focus. I have make a "test.php" with a simple modal ...
stackoverflow.com
모달이 사용자에게 보여졌을 때, 포커싱을 줘보라는 답변이 있었는데 그 방법대로 해결할 수 있었다.
스택오버플로 짱..
아래는 예시이다.
"shown.bs.modal" 이벤트가 해결의 키다.
<!DOCTYPE html>
<html>
<head>
<title>Test WEB</title>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$(".modal").modal("show");
});
//$("#ipt1").focus();
$(".modal").on("shown.bs.modal", function () {
$("#ipt1").focus();
});
});
</script>
</head>
<body>
<form>
<button type="button" class="btn btn-primary" id="btn1">모달창오픈</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" class="form-control" id="ipt1" placeholder="입력">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
</body>반응형
Contents
소중한 공감 감사합니다.