초점 이벤트가있는 필드에 초점 맞추기

Question

선택할 옵션이있는 Jquery UI 대화 상자를 여는 양식 필드의 초점 이벤트를 정의했습니다. 중단되지 않은 데이터 입력을 위해 동일한 필드에 포커스를 유지해야합니다. 내 요구 사항은 datepicker에 표시된 것과 비슷하지만 사용자가 datepicker 오버레이를 볼 수 있지만 날짜 필드에 포커스가 있으므로 사용자가 계속 날짜를 입력 할 수 있습니다.

다음은 관련 필드 및 대화 상자의 코드입니다.

$("#pmt_code").focus(function(){ 
    $("#pmtcodes").dialog("open"); 
    // Keep focus stayed on this field somehow 
    }); 


$("#pmtcodes").dialog({ 
    autoOpen: false, 
    position: { my: "left top", at: "left bottom", of: $("#pmt_code") }, 
    closeOnEscape: true, 
    open: function(){ 
     listPmtCodes(); 
    }   
    }); 

다음은 테이블이있는 대화 부서입니다. jquery datatable plugin을 사용하여이 테이블을 채우고 있습니다.

<div id="pmtcodes" title="payment Codes"> 
     <table cellpadding="0" cellspacing="0" border="0" class="display" id="pmtCodesTable"> 
     <thead> 
      <tr> 
      <th>Code</th> 
      <th>Description</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     </table>   
    </div> 

Answer 1

당신은 오픈 콜백에 다시 컨트롤에 포커스를 설정해야합니다

var $pmt_code = $("#pmt_code"), 
    $pmtcodes = $("#pmtcodes"); 

$pmt_code.focus(function(){ 
    !$pmtcodes.dialog("isOpen") && $pmtcodes.dialog("open"); 
}); 

$pmtcodes.dialog({ 
    autoOpen: false, 
    position: { 
     my: "left top", 
     at: "left bottom", 
     of: $pmt_code 
    }, 
    closeOnEscape: true, 
    open: function(){ 
     listPmtCodes(); 
     setTimeout(function() { // Workaround for Internet Explorer 
      $pmt_code.focus(); //<---- Keep focus stayed on this field somehow 
     }, 10); 
    } 
}); 

난 그냥 약간의 각 요소에 대해 한 번 더 한 후 DOM에서 검색을 피하기 위해 코드를 변경했습니다. 당신은 또한 ESC를 잡으려고의 keyup 이벤트를 구현해야 할

대화 종료를 누르면 :

$pmt_code.keyup(function (e) { 
    if (e.keyCode == 27 && $pmtcodes.dialog("isOpen")) // ESC pressed 
    { 
     $pmtcodes.dialog("close"); 
    } 
}); 

확인 하나 여기에 라이브 : http://jsfiddle.net/9KuVA/

나는이 캔 당신은 점점