ส่งกล่องโต้ตอบ jQuery UI บน <Enter>

ฉันมีกล่องโต้ตอบ jQuery UI พร้อมแบบฟอร์ม ฉันต้องการจำลองการคลิกที่ปุ่มใดปุ่มหนึ่งของกล่องโต้ตอบเพื่อที่คุณจะได้ไม่ต้องใช้เมาส์หรือแท็บ กล่าวอีกนัยหนึ่งคือฉันต้องการให้มันทำหน้าที่เหมือนกล่องโต้ตอบ GUI ทั่วไปที่จำลองการกดปุ่ม "ตกลง"

ผมถือว่านี้อาจจะเป็นตัวเลือกที่ง่ายกับการโต้ตอบ แต่ฉันไม่สามารถหาได้ในเอกสาร jQuery UI ฉันสามารถผูกข้อมูลแต่ละฟอร์มด้วย 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. ใช้ 'delegate' แทน 'live' ที่เลิกใช้แล้วและหลีกเลี่ยงการใช้เมธอด 'on' ใหม่เพื่ออนุญาตให้ทำงานกับ jquery เวอร์ชันเก่า
5. เนื่องจากเราใช้ delegate ซึ่งหมายความว่าโค้ดด้านบนสามารถเขียนได้ก่อนที่จะเริ่มการโต้ตอบ คุณยังสามารถใส่ไว้ในแท็กหัวได้โดยไม่ต้อง$(document).ready
6. นอกจากนี้ผู้รับมอบสิทธิ์จะผูกตัวจัดการเพียงคนเดียวdocumentและจะไม่ผูกตัวจัดการกับแต่ละกล่องโต้ตอบเหมือนในโค้ดด้านบนเพื่อประสิทธิภาพที่มากขึ้น
7. ทำงานได้แม้กับกล่องโต้ตอบที่สร้างขึ้นแบบไดนามิกเช่น $('<div><input type="text"/></div>').dialog({buttons: .});
8. ทำงานด้วยคือ 7/8/9!
9. หลีกเลี่ยงการใช้ตัวเลือกช้า :first
10. หลีกเลี่ยงการใช้แฮ็กเช่นในคำตอบที่นี่เพื่อสร้างปุ่มส่งที่ซ่อนอยู่

ข้อเสีย:

1. เรียกใช้ปุ่มแรกเป็นปุ่มเริ่มต้นคุณสามารถเลือกปุ่มอื่นที่มีeq()หรือเรียกใช้ฟังก์ชันภายในคำสั่ง if
2. กล่องโต้ตอบทั้งหมดจะมีลักษณะการทำงานเหมือนกันที่คุณสามารถกรองได้โดยทำให้ตัวเลือกของคุณมีความเฉพาะเจาะจงมากขึ้นเช่น "#dialog" แทน '.ui-dialog'

ฉันรู้ว่าคำถามเก่า แต่ฉันก็มีความต้องการเช่นเดียวกันฉันจึงแบ่งปันวิธีแก้ปัญหาที่ฉันเคยใช้

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

ทำงานได้อย่างสวยงามกับ JQuery UI เวอร์ชันล่าสุด (1.8.1) คุณยังสามารถใช้: first แทน: last ขึ้นอยู่กับปุ่มที่คุณต้องการตั้งเป็นค่าเริ่มต้น

โซลูชันนี้เมื่อเทียบกับวิธีที่เลือกไว้ข้างต้นมีข้อดีในการแสดงว่าปุ่มใดเป็นปุ่มเริ่มต้นสำหรับผู้ใช้ ผู้ใช้ยังสามารถ TAB ระหว่างปุ่มต่างๆและการกด 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 และในบางกรณีคุณอาจต้องการใช้: ตัวเลือกสุดท้าย

แทนที่จะฟังรหัสคีย์เช่นในคำตอบนี้ (ซึ่งฉันไม่สามารถทำงานได้) คุณสามารถผูกกับเหตุการณ์ส่งของแบบฟอร์มภายในกล่องโต้ตอบจากนั้นทำสิ่งนี้:

$("#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 แตกต่างกันและบางเบราว์เซอร์จะไม่ทำการส่งเมื่อป้อนเสมอไป

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 ได้ทุกเมื่อที่คุณกรอกข้อมูลองค์ประกอบของฟอร์มและให้ปุ่ม "ปัจจุบัน" ดำเนินการอยู่ก่อน หากคุณต้องการพฤติกรรมนี้เฉพาะเมื่อปุ่มถูกโฟกัสจริงๆคำตอบของฉันซับซ้อนเกินไป

ฉันพบวิธีแก้ปัญหานี้มันใช้ได้กับ IE8, Chrome 23.0 และ Firefox 16.0

มันขึ้นอยู่กับความคิดเห็นของ Robert Schmidt

$("#id_dialog").dialog({
    buttons: [{
        text: "Accept",
        click: function() {
            // My function
        },
        id: 'dialog_accept_button'
    }]
}).keyup(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER)
        $('#dialog_accept_button').click();
});

ฉันหวังว่ามันจะช่วยทุกคน

บางครั้งเราลืมพื้นฐานของสิ่งที่เบราว์เซอร์รองรับอยู่แล้ว:

<input type="submit" style="visibility:hidden" />

ซึ่งจะทำให้ENTERคีย์ในการส่งแบบฟอร์ม

ฉันทำแบบนั้น ... ;) หวังว่าจะเป็นประโยชน์สำหรับใครบางคน ..

$(window).keypress(function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click();
        return false;
    }
});

สิ่งนี้จะช่วยกระตุ้นการคลิกของตัวจัดการการคลิกของปุ่ม ตัวอย่างนี้สมมติว่าคุณได้ตั้งค่าแบบฟอร์มในกล่องโต้ตอบเพื่อใช้ปลั๊กอิน jquery.validate แต่สามารถดัดแปลงได้ง่าย

open: function(e,ui) {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
           $('.ui-dialog-buttonpane button:last').trigger('click');
        }
    });
},
buttons: {
    "Submit Form" : function() {
            var isValid = $('#yourFormsID').valid();
            // if valid do ajax call
            if(isValid){
               //do  your ajax call here. with serialize form or something...

            }
}

ฉันรู้ว่ามีคำตอบมากมายอยู่แล้ว แต่ฉันคิดว่าโดยธรรมชาติแล้วคำตอบของฉันเป็นวิธีที่สะอาดที่สุดและอาจสั้นที่สุด มีข้อดีคือใช้งานได้กับกล่องโต้ตอบใด ๆ ที่สร้างขึ้นเมื่อใดก็ได้ในอนาคต

$(".ui-dialog").live("keyup", function(e) {
    if (e.keyCode === 13) {
        $('.ok-button', $(this) ).first().click();
    }
});

นี่คือสิ่งที่ฉันทำ:

myForm.dialog({
  "ok": function(){
    ...blah...
  }
  Cancel: function(){
    ...blah...
  }
}).keyup(function(e){
  if( e.keyCode == 13 ){
   $(this).parent().find('button:nth-child(1)').trigger("click");
  }
});

ในกรณีนี้ myForm คือออบเจ็กต์ jQuery ที่มี html ของฟอร์ม (โปรดทราบว่าไม่มีแท็ก "form" อยู่ในนั้น ... หากคุณใส่ไว้ในหน้าจอทั้งหมดจะรีเฟรชเมื่อคุณกด "enter")

เมื่อใดก็ตามที่ผู้ใช้กด "Enter" จากในแบบฟอร์มจะเท่ากับการคลิกปุ่ม "ตกลง"

นอกจากนี้ยังหลีกเลี่ยงปัญหาการเปิดแบบฟอร์มโดยมีปุ่ม "ตกลง" ที่ไฮไลต์ไว้แล้ว แม้ว่าจะดีสำหรับแบบฟอร์มที่ไม่มีช่องหากคุณต้องการให้ผู้ใช้กรอกข้อมูลคุณอาจต้องการให้ฟิลด์แรกถูกเน้น

เสร็จแล้วเสร็จ

  $('#login input').keyup(function(e) {
      if (e.keyCode == 13) {
          $('#login form').submit();
      }
   }

หากคุณรู้จักตัวเลือกองค์ประกอบปุ่ม:

$('#dialogBox').dialog('open');
$('#okButton').focus();

ควรทำเคล็ดลับสำหรับคุณ การดำเนินการนี้จะเน้นปุ่มตกลงและป้อนจะ 'คลิก' ตามที่คุณคาดหวัง นี่เป็นเทคนิคเดียวกับที่ใช้ในกล่องโต้ตอบ UI ดั้งเดิม

   $("#LogOn").dialog({
       modal: true,
       autoOpen: false,
       title: 'Please Log On',
       width: 370,
       height: 260,
       buttons: { "Log On": function () { alert('Hello world'); } },
       open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();}
   });

ฉันพบวิธีแก้ปัญหาที่ค่อนข้างง่ายสำหรับปัญหานี้:

var d = $('<div title="My dialog form"><input /></div>').dialog(
    buttons: [{
        text: "Ok",
        click: function(){
            // do something
            alert('it works');
        },
        className: 'dialog_default_button'
    }]
});

$(d).find('input').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        e.preventDefault();
        $('.dialog_default_button').click();
    }
});

$('#DialogID').dialog("option", "buttons")["TheButton"].apply()

สิ่งนี้ได้ผลดีสำหรับฉัน ..

ดูเหมือนว่าโซลูชันเหล่านี้จะไม่เหมาะกับฉันใน IE9 ก็จบตามนี้ ..

$('#my-dialog').dialog({
    ...
    open: function () {
        $(this).parent()
               .find("button:eq(0)")
               .focus()
               .keyup(function (e) {
                   if (e.keyCode == $.ui.keyCode.ENTER) {
                       $(this).trigger("click");
                   };
               });
    }
});

เนื้อหาด้านล่างถูกใช้เนื่องจากมีการเพิ่มไดอะล็อก DIV ในร่างกายดังนั้นตอนนี้ร่างกายจึงฟังเหตุการณ์คีย์บอร์ด ทดสอบบน IE8,9,10, Mojila, Chrome

open: function() {
$('body').keypress(function (e) { 
     if (e.keyCode == 13) {   
     $(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click");
     return false; 
     }
  }); 
}

เพราะฉันไม่มีชื่อเสียงพอที่จะแสดงความคิดเห็น

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

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

  if (e.which === $.ui.keyCode.ENTER && tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button') {
      $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
    return false;
  } else if (e.which === $.ui.keyCode.ESCAPE) {
      $(this).close();
  }
});

คำตอบที่แก้ไขโดย Basemm # 35 ก็เพิ่ม Escape เพื่อปิดกล่องโต้ตอบ

ใช้งานได้ดีขอบคุณ !!!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },

ให้คลาสปุ่มของคุณและเลือกตามปกติ:

$('#DialogTag').dialog({
  closeOnEscape: true,
  buttons: [
    {
      text: 'Cancel',
      class: 'myCancelButton',
      click: function() {
        // Close dialog fct
      }
    },
    {
      text: 'Ok',
      class: 'myOKButton',
      click: function() {
        // OK fct
      }
    }
  ],
  open: function() {

    $(document).keyup(function(event) {

      if (event.keyCode === 13) {
        $('.myOKButton').click();
      }

    });

  }
});