[javascript] <Enter>에 jQuery UI 제출 대화 상자

위의 답변을 요약하고 중요한 내용을 추가했습니다.

$(document).delegate('.ui-dialog', 'keyup', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === 'input' && target.type === 'button')
          ? 'button'
          : tagName;

        isClickableTag = tagName !== 'textarea' &&
          tagName !== 'select' &&
          tagName !== 'button';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');

            return false;
        }
    });

장점 :

1. 같은 비 호환 요소에 키를 입력 허용 textarea, select, button또는 유형 버튼 입력, 사용자 클릭이에 입력 상상 textarea과 새로운 라인을 얻는 대신 제출 양식을 얻을!
2. 바인딩은 한 번 수행됩니다. 대화 상자가 ‘열릴 때마다 동일한 기능을 반복해서 바인딩하지 않도록 대화 상자’열기 ‘콜백을 사용하여 Enter 키를 바인딩하지 마십시오.
3. 위의 일부 답변이 제안하는 것처럼 기존 코드를 변경하지 마십시오
4. 더 이상 사용되지 않는 ‘live’대신 ‘delegate’를 사용하고 이전 버전의 jquery로 작업 할 수 있도록 새로운 ‘on’방법을 사용하지 마십시오
5. delegate를 사용하기 때문에 대화 상자를 초기화하기 전에도 위의 코드를 작성할 수 있습니다. 없이도 헤드 태그에 넣을 수 있습니다$(document).ready
6. 또한 델리게이트는 document위의 일부 코드와 같이 하나의 핸들러 만 바인딩하고 각 대화 상자에는 핸들러를 바인딩하지 않으므로 효율성이 향상됩니다.
7. 다음과 같이 동적으로 생성 된 대화 상자에서도 작동 $('<div><input type="text"/></div>').dialog({buttons: .});
8. 즉 7/8/9로 작업했습니다!
9. 느린 선택기를 사용하지 마십시오 :first
10. 숨겨진 제출 버튼을 만들기 위해 여기 에 답변과 같은 해킹을 사용하지 마십시오

단점 :

1. 첫 번째 버튼을 기본 버튼으로 실행하십시오 .if 버튼으로 다른 버튼을 선택 eq()하거나 함수를 호출 할 수 있습니다
2. 모든 대화 상자는 선택기를보다 구체적으로 지정하여 필터링 할 수있는 것과 동일한 동작을합니다 (예 : ‘#dialog’대신) '.ui-dialog'

나는 그 질문이 오래되었다는 것을 알고 있지만 같은 요구가 있었기 때문에 내가 사용한 솔루션을 공유했습니다.

답변

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

$.fn.dlg = function(options) {
    return this.each(function() {
             $(this).dialog(options);
             $(this).keyup(function(e){
                  if (e.keyCode == 13) {
                       $('.ui-dialog').find('button:first').trigger('click');
                  }
             });
    });
}

$('#a-dialog').mydlg({...options...})

$('#a-dialog').dialog('close')

$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();

$("#my_form").dialog({
  open: function(){
    //Clear out any old bindings
    $("#my_form").unbind('submit');
    $("#my_form").submit(function(){
      //simulate click on create button
      $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();
      return false;
    });
  },
  buttons: {
    'Create': function() {
      //Do something
    },
    'Cancel': function() {
      $(this).dialog('close');
    }
  }
});

$('body').on('keypress', '.ui-dialog', function(event) {
    if (event.keyCode === $.ui.keyCode.ENTER) {
        $('.ui-dialog-buttonpane button:first', $(this)).click();
        return false;
    }
});