Enter 키를 누를 때 모달 해제 방지

내부에 폼이있는 부트 스트랩 모달을 설정했는데 Enter 키를 누르면 모달이 해제되는 것을 알았습니다. Enter 키를 누를 때 해제하지 않는 방법이 있습니까?

keyboard : false로 모달 활성화를 시도했지만 ESC 키로 만 해제 할 수 없습니다.

나도이 문제가 있었다.
내 문제는 모달에 닫기 버튼이 있다는 것입니다.

<button class="close" data-dismiss="modal">&times;</button>

입력 필드에서 Enter를 누르면이 버튼이 실행됩니다. 대신 앵커로 변경했으며 이제 예상대로 작동합니다 (양식을 제출하고 모달을 닫지 않음).

<a class="close" data-dismiss="modal">&times;</a>

귀하의 출처를 보지 않고는 귀하의 원인이 동일한 지 확인할 수 없습니다.

버튼 요소에 type = "button" 속성을 추가하기 만하면 일부 브라우저는 유형 을 기본적 으로 제출 로 해석합니다 .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

이것은 모달에있는 모든 버튼에 적용됩니다.

<button type="button" class="close" data-dismiss="modal">×</button>

내 Bootstrap Modal에서 모든 버튼을 제거한 후에도이 문제가 발생했기 때문에 여기에 나온 해결책 중 어느 것도 도움이되지 않았습니다.

단일 텍스트 필드가있는 양식을 사용하면 키보드 포커스가 텍스트 필드에있을 때 Enter 키를 누르면 브라우저가 양식 제출을 수행하고 결과가 닫힙니다. 이것은 Bootstrap의 어떤 것보다 브라우저 / 양식 문제인 것 같습니다.

내 해결책은 양식의 onsubmit 속성을 onsubmit = "return false"로 설정하는 것이 었습니다.

실제로 제출 이벤트를 사용하는 경우 문제가 될 수 있지만 브라우저 제출을 수행하는 대신 AJAX 요청을 생성하는 JS 프레임 워크를 사용하고 있으므로 제출을 완전히 비활성화하는 것을 선호합니다. (또한 제출을 트리거 할 수있는 모든 양식 요소를 수동으로 조정할 필요가 없음을 의미합니다).

여기에 더 많은 정보 : 단일 텍스트 입력 필드가있는 부트 스트랩 모달 대화 상자는 Enter 키에서 항상 닫힘

취소 버튼 앞에 로그인 버튼을두면 문제가 해결됩니다.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>

나는 같은 문제가 있었고 나는 그것을 해결했다.

<form onsubmit="return false;">

하지만 해결책이 하나 더 있습니다. 보이지 않는 더미 입력을 추가 할 수 있으므로 양식은 다음과 같습니다.

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

나는 방금 비슷한 경험을했고 그것을 해결하는 방법은 태그를 사용하는 대신 태그를 type = "button"태그로 변경했습니다. 이것은 "enter"키를 누르고 부트 스트랩 모달을 해제하는 문제를 해결하는 것처럼 보였습니다.

나도이 문제가 있었고 이렇게 해결했습니다. 양식에 onsubmit을 추가했습니다. 또한 엔터 키를 저장 키로 사용할 수 있기를 원했기 때문에 onsubmit에 save_stuff () javascript를 추가했습니다. 거짓 반환; 양식 제출을 방지하는 데 사용됩니다.

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>