단일 텍스트 입력 필드가있는 부트 스트랩 모달 대화 상자는 항상 Enter 키를 닫습니다.

Question

필드에 포커스가 있고 입력을 누른 경우 하나의 텍스트 필드 (및 NO 버튼)가있는이 간단한 모달 대화 상자가 닫히는 이유는 무엇입니까?

<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a> 

<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>--> 
    <h3 id="myModalLabel">Add Device Folder</h3> 
    </div> 

    <div class="modal-body"> 
    <form class="form-horizontal"> 
     <div class="control-group"> 
     <label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label> 
     <div class="controls"> 
      <input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off"> 
     </div> 
     </div> 
    </form> 
    </div> 

    <div class="modal-footer"> 
    <!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>--> 
    <!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>--> 
    </div> 
</div> 

는 (. 내가 앵커로 버튼 태그를 변환 한 버튼 및 앵커 태그에 내가 유형 = "버튼"을 뒀다) 버튼 문제입니다 제안 광범위한 토론 here 있습니다. 그러나 제안 된 모든 솔루션을 시도한 다음 버튼을 완전히 주석 처리하는 것으로 끝났습니다. 단순히 같은 텍스트 입력을 복제하여 두 개의 필드가있는 경우, 문제가 사라지고

가

참고 오른쪽에 저를 가리키는 위해 @mccannf하는

Answer 1

감사합니다 (입력에 대한 해고가 발생하지 않습니다 중 하나를 텍스트 필드에 초점) 방향. 이것은 Bootstrap에 특정한 것보다 더 일반적인 양식 제출 문제 인 것 같습니다. 두 가지 해결책 :

1. 양식의 onsubmit 속성을 onsubmit = "return false;"로 설정하십시오. 이 예측하기 어려운 것 같습니다 (아마도 브라우저 의존) 양식 필드 또는 양식이 입력 입력에 제출 트리거하지 않을 수 있습니다로 (https://stackoverflow.com/a/1329168/569091)

나는이 솔루션을 최선을 좋아한다.

그래서, 원래의 질문에서 내 예제 :

<form class="form-horizontal" onsubmit="return false"> 

2. false를 돌려 (? 또는 onKeyUp에)에 onKeyDown에 속성을 설정하면 event.keyCode에서 == 13 (https://stackoverflow.com/a/2037935/569091) 에서 이 링크, onKeyUp에 일했다,하지만 난 onKeyDown에 사용했다 (브라우저에 의존?)

그래서, 원래의 질문에서 내 예 :

function ignoreEnter(event) 
{ 
    if (event.keyCode == 13) { 
    return false; 
    } 
} 

// and this in the HTML 
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);"> 

Answer 2

이전에 해답을 명확히하고 레이킨 주석에 응답하는 것.

1. 양식의 onsubmit 속성을 onsubmit = "return false;"로 설정하십시오. 당신이 양식을 어떻게 볼 수 있듯이

<div class="modal hide fade" tabindex="-1"> 
<div class="modal-header"> 
     <button class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">{% trans "Create" %}</h3> 
    </div> 
    <div class="modal-body"> 
     <form method="POST" class="form-horizontal" onsubmit="return false"> 
      <input id="id_name" maxlength="250" name="name" type="text"> 
     </form> 
    </div> 
    <div class="modal-footer"> 
    <button id="save-button" class="btn">{% trans "Save" %}</button> 
    <button class="btn" aria-hidden="true">{% trans "Cancel" %}</button> 
    </div> 
</div> 

<script> 
    $('#save-button').on('click', function(){ 
     // TODO add ajax call 
    }); 
</script> 

제출 예를 들어 자바 스크립트하여 양식의 제출을 ​​제어 할 때 (https://stackoverflow.com/a/1329168/569091)

이 솔루션은 버튼의 onclick을 JQuery와 호출을 통해 도움이됩니다 save id. 당신이 태그를 형성하기위한 조치를 추가하려면

은 그러나 당신은 아마 false를 반환하는 onKeyDown에 설정 두 번째 솔루션

2를 사용 (또는 onKeyUp에?) 속성이있을 때 event.keyCode에서 == (13) (https://stackoverflow.com/a/2037935/569091)

내 의견으로는, 당신이 dinamically 양식을 구축하려는 경우이 솔루션을 좋아하지 않아.마라 네즈의 게시물에

는

Answer 3

그냥 코멘트 :

이벤트와 놀러 액션 태그를 사용, 그리고 또 다른 방법이있다. 폼에 더미 보이지 않는 입력을 추가 할 수 있으며, Enter 키는 양식을 제출하지 않습니다.

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