동적 부트 스트랩 모달을로드하고 텍스트 입력이 거의 없습니다. 커서가이 모달의 첫 번째 입력에 초점을 맞추고 싶은 문제는 기본적으로 발생하지 않습니다.
그래서이 코드를 작성했습니다.
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
그러나 이제는 잠시 입력에 초점을 맞춘 다음 자동으로 사라집니다. 왜 이런 일이 발생하고 어떻게 해결합니까?
답변
@scumah가 해답을드립니다 : Twitter 부트 스트랩-클릭시 모달 내부의 텍스트 영역에 집중
부트 스트랩 2의 경우
modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});
업데이트 : 부트 스트랩 3 용
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
========== 업데이트 ======
질문에 대한 응답으로 다른 데이터 대상을 지정하고 양식 입력 필드의 ID와 일치하도록 모달 ID의 이름을 바꾸고 업데이트 한 다음 마지막으로 이러한 새 항목과 일치하도록 JS를 업데이트하는 경우 동일한 페이지에서 여러 모달과 함께이를 사용할 수 있습니다. ID : http://jsfiddle.net/panchroma/owtqhpzr/5/
참조
HTML
...
<button ... data-target="#myModal1"> ... </button>
...
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
...
<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>
JS
$('#myModal1').on('shown.bs.modal', function() {
$('#textareaID1').focus();
})
답변
jQuery없이이 작업을 수행하는 가장 좋은 방법을 찾았습니다.
<input value="" autofocus>
완벽하게 작동합니다.
이것은 html5 속성입니다. 모든 주요 브라우저에서 지원됩니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
답변
David Taiaroa의 대답은 맞지만 모달을 “페이드 인”하는 시간이 입력에 초점을 맞출 수 없기 때문에 작동하지 않습니다. 지연을 만들어야합니다.
$('#myModal').on('shown.bs.modal', function () {
...
setTimeout(function (){
$('#textareaID').focus();
}, 1000);
})
답변
일반적인 코드 (아래) 가 작동 하지 않습니다 .
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
해결책을 찾았습니다 .
$('body').on('shown.bs.modal', '#myModal', function () {
$('input:visible:enabled:first', this).focus();
})
여기에서 더보기
답변
그 부트 스트랩이 페이지에 다음 정보를 추가했습니다.
HTML5가 의미를 정의하는 방식으로 인해 autofocus HTML 속성은 Bootstrap 모달에 영향을 미치지 않습니다. 동일한 효과를 얻으려면 일부 사용자 정의 JavaScript를 사용하십시오.
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
답변
이것은 초점을 맞춘 입력 필드가있는 모든 팝업에서 가장 잘 작동하는 간단한 코드입니다.
$(".modal").on('shown.bs.modal', function () {
$(this).find("input:visible:first").focus();
});
답변
jQuery를 사용한다고 가정 할 때 가장 정답은이 페이지에있는 모든 답변의 측면과 부트 스트랩이 통과하는 이벤트를 사용하는 것입니다.
$(document).on('shown.bs.modal', function(e) {
$('input:visible:enabled:first', e.target).focus();
});
또한 변화 일 것 $(document)
에 $('.modal')
처럼, 또는 신호가이 초점이 발생해야한다는 것을 모달에 클래스를 추가하는$('.modal.focus-on-first-input')