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

양식이있는 jQuery UI 대화 상자가 있습니다. 대화 상자의 버튼 중 하나에 대한 클릭을 시뮬레이션하여 마우스 또는 탭을 사용할 필요가 없습니다. 다시 말해, “OK”버튼을 누르는 것을 시뮬레이션하는 일반 GUI 대화 상자처럼 작동하기를 원합니다.

대화 상자가있는 간단한 옵션 일 수 있지만 jQuery UI documentation 에서 찾을 수는 없습니다 . 각 양식 입력을 keyup ()으로 바인딩 할 수는 있지만 더 간단하고 깨끗한 방법이 있는지 알 수 없었습니다. 감사.



답변

jQuery UI 위젯에 옵션이 있는지 모르겠지만 keypress대화 상자가 포함 된 div에 이벤트를 바인딩 할 수 있습니다 …

$('#DialogTag').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          //Close dialog and/or submit here...
    }
});

대화 상자에서 어떤 요소에 포커스가 있는지에 관계없이 실행되며 원하는 요소에 따라 좋을 수도 있고 그렇지 않을 수도 있습니다.

이것을 기본 기능으로 만들려면 다음 코드를 추가하면됩니다.

// jqueryui defaults
$.extend($.ui.dialog.prototype.options, {
    create: function() {
        var $this = $(this);

        // focus first button and bind enter to it
        $this.parent().find('.ui-dialog-buttonpane button:first').focus();
        $this.keypress(function(e) {
            if( e.keyCode == $.ui.keyCode.ENTER ) {
                $this.parent().find('.ui-dialog-buttonpane button:first').click();
                return false;
            }
        });
    }
});

다음은 그 모양에 대한 자세한 내용입니다.

$( "#dialog-form" ).dialog({
  buttons: {  },
  open: function() {
    $("#dialog-form").keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find("button:eq(0)").trigger("click");
      }
    });
  };
});


답변

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

$(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();

최신 버전의 JQuery UI (1.8.1)와 아름답게 작동합니다. 기본값으로 설정하려는 버튼에 따라 : last 대신 : first를 사용할 수도 있습니다.

이 솔루션은 위에서 선택한 것과 비교하여 어떤 버튼이 사용자의 기본 버튼인지 표시 할 수있는 이점이 있습니다. 사용자는 버튼 사이를 탭할 수 있으며 ENTER를 누르면 현재 포커스가있는 버튼을 클릭합니다.

건배.


답변

이 작업을보다 일반적으로 수행 할 수있는 조잡하지만 효과적인 방법 :

$.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...})

그리고 그 후 일반적인 jquery 대화 상자처럼 사용하십시오.

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

좀 더 특별한 경우에 작동하도록 개선 할 수있는 방법이 있습니다. 위의 코드를 사용하면 Enter 키를 누를 때 트리거되는 버튼으로 대화 상자의 첫 번째 버튼을 자동으로 선택합니다. 또한 주어진 시간에 하나의 활성 대화 상자 만 있다고 가정합니다. 그러나 당신은 아이디어를 얻습니다.

참고 : 위에서 언급했듯이 enter를 누르면 누른 버튼은 설정에 따라 다릅니다. 따라서 어떤 경우에는 .find 메소드에서 : first 선택기를 사용하고 싶거나 다른 경우에는 : last 선택기를 사용하고 싶을 수도 있습니다.


답변

이 답변과 같은 키 코드를 듣는 대신 (일할 수 없었습니다) 대화 상자 내에서 양식의 제출 이벤트에 바인딩 한 다음이를 수행 할 수 있습니다.

$("#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');
    }
  }
});

다른 브라우저는 Enter 키를 다르게 처리하며 일부는 항상 Enter 키를 제출하지는 않습니다.


답변

Ben Clayton은 가장 짧고 가장 짧으며 jquery 대화 상자가 초기화되기 전에 색인 페이지의 맨 위에 놓을 수 있습니다. 그러나 “.live”는 더 이상 사용되지 않습니다. 우선 조치는 “.on”입니다. “.on”을 “.live”처럼 작동 시키려면 위임 된 이벤트를 사용하여 이벤트 핸들러를 연결해야합니다. 또한 몇 가지 다른 것들 …

  1. 실제 키 코드를 기억할 필요가 없으므로 ui.keycode.ENTER 메소드를 사용하여 enter 키를 테스트하는 것이 좋습니다.

  2. 클릭 선택기에 “$ ( ‘. ui-dialog-buttonpane button : first’, $ (this))”를 사용하면 전체 메소드가 일반화됩니다.

  3. “return false”를 추가하려고합니다. 기본값을 방지하고 전파를 중지합니다.

이 경우 …

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


답변

더 간단하지는 않지만 일반적으로 현재 포커스가있는 버튼을 추적합니다. 포커스가 다른 컨트롤로 변경되면 “버튼 포커스”는 마지막에 포커스가있는 버튼에 남아 있습니다. 일반적으로 “버튼 포커스”는 기본 버튼에서 시작됩니다. 다른 버튼을 누르면 “버튼 포커스”가 변경됩니다. 다른 양식 요소로 이동하면 “버튼 포커스”가 기본 버튼으로 다시 설정되는지 여부를 결정해야합니다. 또한 포커스 된 버튼이 창에서 실제 포커스를 잃기 때문에 포커스 된 버튼을 나타내려면 브라우저 기본값 이외의 시각적 표시기가 필요할 것입니다.

버튼 포커스 로직을 다운하고 구현하면 대화 상자 자체에 키 핸들러를 추가하고 현재 “포커스 된”버튼과 관련된 작업을 호출하게됩니다.

편집 : 양식 요소를 채우고 “현재”버튼 동작이 우선 할 때마다 Enter 키를 누르고 싶다고 가정합니다. 버튼에 실제로 초점을 맞췄을 때만이 동작을 원하면 대답이 너무 복잡합니다.