jQuery UI 대화 상자 - Enter 키가 클릭과 동일해야합니다.

Question

"ENTER"를 누르고 대화 상자에 제출 버튼과 동일한 작업을 실행하게하고 싶습니다.

여기에서 비슷한 질문을 발견했습니다 : Submit jQuery UI dialog on <Enter>. 일부 솔루션을 코드에 추가했는데 문제가 해결되지 않았습니다.

이

버튼 :

<button id="myButton">Execute Tasks</button> 

대화 자체 :

<div id='myDialog' title="New Task(s):"> 
    <p>Enter the name of the tasks you wish to execute</p> 
     <form> 
      <label for="name"> 
       <input type="text" name="name" id="name" /> 
      </label> 
     </form> 
</div> 

내부 스크립트 태그 :

$('#myButton').click(function() { 
    $("#myDialog").dialog({ 
     open: function(){ 

      $("#myDialog").unbind('submit'); 
      $("#myDialog").submit(function() { 
      $("#myDialog").parents('.ui-dialog').first().find('.ui-button').first().click(); 
      return false; 
      }); 
     }, 
     buttons: { 
      "Run tasks": function() { .... }, 
      "Cancel":function() { $(this).dialog("close"); }; 
     }, 
    }); 
}); 

Answer 1

대화 상자 열기에서 양식 제출 이벤트를 바인드 할 수 있습니다. 텍스트 상자에서 Enter 키를 누르면 자동으로 양식 제출이 시작됩니다.

또한 작업 실행 버튼을 클릭하면 제출 이벤트를 트리거 할 수 있습니다.

jsFiddle는 : http://jsfiddle.net/CodingDawg/dk7hT/

$('#myButton').click(function() { 
    $("#myDialog").dialog({ 
     open: function() { 
      $(this).off('submit').on('submit', function() { 
       //Run tasks 
       //$(this).dialog('close'); //You can Close the dialog after running the tasks. 
       return false; 
      }); 
     }, 
     buttons: { 
      "Run tasks": function() { 
       $(this).find('form').submit(); 
      }, 
       "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}); 

Answer 2

그것은 아니다

이

내가 지금까지 무엇을 가지고 당신이 시도한 것을 성취하기가 어렵다. 할 수는 있지만 코드는 사용자가 요구 한 것이 아닙니다. 나는 그것을 단순화하려고합니다 : 양식 제출시

이 코드가 실행 : 나는 JQuery와 선택에 준 ID에

$("#MyForm").submit(function(event) { 
    alert("Handler for .submit() called."); // Your code should be here 
    event.preventDefault(); 
}); 

봐 - $("#MyForm")를 - 그것은 폼 요소 - 당신은 'didn를 양식 ID를 지정하십시오.

그리고 당신은 제출 양식도 당신의 필요 또한이 코드에 Enter 키 바인딩 할 경우 :

$(document).keypress(function(event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     $("#MyForm").submit(); 
    } 
}); 

하고 당신이해야 모습을 쉽게하는 방법을 이해할 수 있도록 내가 당신의 HTML을 다시 편집 :

를

<div id='myDialog' title="New Task(s):"> 
    <p>Enter the name of the tasks you wish to execute</p> 
    <form id="MyForm"> 
     <label for="name">My Label</label> 
     <input type="text" name="name" id="name" />  
    </form> 
</div>