<এন্টার> তে jQuery UI ডায়ালগ জমা দিন


131

আমার একটি ফর্ম সহ একটি jQuery UI ডায়ালগ বক্স রয়েছে। আমি ডায়লগের যে কোনও একটি বোতামের একটি ক্লিক সিমুলেট করতে চাই যাতে আপনার এটিতে মাউস বা ট্যাবটি ব্যবহার করতে না হয়। অন্য কথায়, আমি এটি একটি নিয়মিত জিইউআই ডায়ালগ বক্সের মতো কাজ করতে চাই যেখানে "ওকে" বোতামটি হিট করার অনুকরণ করে।

আমি ধারণা করছি এটি ডায়ালগের সাথে একটি সহজ বিকল্প হতে পারে তবে আমি jQuery UI ডকুমেন্টেশনে এটি খুঁজে পাচ্ছি না । আমি প্রতিটি ফর্ম ইনপুট কীআপ () দিয়ে আবদ্ধ করতে পারি তবে বুঝতে পারি না এর চেয়ে সহজ / পরিষ্কার উপায় আছে কিনা। ধন্যবাদ।


আপনি যদি কোনও ফর্ম ব্যবহার এড়াতে এবং পুনঃব্যবহারযোগ্য কোডটি চান তা চাইলে আমি এখানে একটি ভাল উত্তর সরবরাহ করেছি: stackoverflow.com/a/9628800/329367
ড্যারেন

উত্তর:


153

আমি জানি না যে jQuery UI উইজেটে কোনও বিকল্প আছে কিনা , তবে আপনি কেবল keypressইভেন্টটিকে ডিভের সাথে সংযুক্ত করতে পারেন যাতে আপনার ডায়লগটি রয়েছে ...

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

2
কিছু নয়, আমি এটি পেয়েছি: কথোপকথনে "ওপেন" যুক্ত করুন (যেমন ক্লোজ, মডেল, বিজিফ্রেম ইত্যাদি) এবং সেখানে কীপ হ্যান্ডলারটি সংযুক্ত করুন।
মিলান বাবুস্কভ

5
ওয়েবকিট (সাফারি / ক্রোম) এর জন্য, এটি কেবল তখনই কাজ করে যদি আমি "কীআপ" এর পরিবর্তে "কীডাউন" করি। এটি সাম্প্রতিক পরিবর্তন কিনা তা নিশ্চিত না বা আমার পৃষ্ঠায় এটির আসল রূপ রয়েছে কিনা তাও নিশ্চিত। তবুও, টিপটির জন্য ধন্যবাদ!
নিকোলাস পাইসেকি

12
(E.keyCode == 13) এর পরিবর্তে আপনি যদি (e.keyCode === ui .ui.keyCode.ENTER) পাঠযোগ্যতা বাড়াতে পারেন তবে do
এ। মারে

2
আমি এই উত্তরটি ভোট দিয়েছি। এটি সংক্ষিপ্ত এবং ঝরঝরে হলেও, ফায়ারফক্স .0.০.১ এ ব্যবহারকারী যদি স্বতঃপূরণ ড্রপ ডাউন বাক্স, যেমন পূর্বে প্রবেশ করা ইমেল ঠিকানা থেকে কিছু নির্বাচন করে তবে এটি আপনার "ওকে" বোতামটিও ট্রিগার করবে।
করবার্গার

2
"ওপেন:" ইভেন্টগুলিতে আবদ্ধ হওয়া খুব খারাপ ধারণা। ডায়লগটি খোলার সময় এটি পুনরায় ফিরিয়ে আনবে, যার অর্থ যদি ডায়ালগটি দু'বার খোলা হয়, ইভেন্ট হ্যান্ডলারটি দু'বার কল করা হবে।
এলিজার

67

আমি উপরের উত্তরগুলি সংক্ষিপ্ত করে রেখেছি এবং গুরুত্বপূর্ণ সামগ্রী যুক্ত করেছি

$(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. বাঁধাই একবার হয়ে যায়, ডায়ালগটি ব্যবহার করে 'ওপেন' কলব্যাকটি এড়িয়ে চলুন বাঁধা এন্টার কীটি আবার একই ডায়ালগটি বার বার এড়াতে এড়াতে বারবার ডায়ালগটি 'খোলা' হয়ে থাকে
  3. উপরের কিছু উত্তর হিসাবে পরামর্শ হিসাবে বিদ্যমান কোড পরিবর্তন এড়ান
  4. প্রত্যাশিত 'লাইভ' এর পরিবর্তে 'প্রতিনিধি' ব্যবহার করুন এবং jquery এর পুরানো সংস্করণগুলির সাথে কাজ করার অনুমতি দেওয়ার জন্য নতুন 'অন' পদ্ধতিটি ব্যবহার করা এড়িয়ে চলুন
  5. যেহেতু আমরা প্রতিনিধি ব্যবহার করি, তার মানে উপরের কোডটি ডায়ালগ শুরু করার আগেই লেখা যেতে পারে। আপনি এমনকি এটি ছাড়াও হেড ট্যাগে রাখতে পারেন$(document).ready
  6. এছাড়াও ডেলিগেট কেবল একটি হ্যান্ডলারের সাথে আবদ্ধ হবে document এবং আরও দক্ষতার জন্য উপরের কিছু কোডের মতো প্রতিটি ডায়ালগকে হ্যান্ডলারকে আবদ্ধ করবে না
  7. এমনকি গতিময়ভাবে উত্পন্ন ডায়লগের সাথেও কাজ করে $('<div><input type="text"/></div>').dialog({buttons: .});
  8. অর্থাৎ 7/8/9 নিয়ে কাজ করেছেন!
  9. ধীর নির্বাচক ব্যবহার করা এড়িয়ে চলুন :first
  10. একটি লুকানো জমা বোতাম তৈরি করতে এখানে উত্তর মত হ্যাক ব্যবহার এড়ান

অসুবিধা:

  1. ডিফল্ট হিসাবে প্রথম বোতামটি চালান, আপনি এর সাথে অন্য বোতামটি চয়ন করতে পারেন eq() বা if স্টেটমেন্টের ভিতরে একটি ফাংশন কল করতে পারেন
  2. সমস্ত সংলাপের একই আচরণ থাকবে আপনি নিজের নির্বাচককে আরও নির্দিষ্ট করে এর পরিবর্তে '# ডায়ালগ' করে ফিল্টার করতে পারবেন '.ui-dialog'

আমি জানি প্রশ্নটি পুরানো তবে আমার একই চাহিদা ছিল তাই আমি যে সমাধানটি ব্যবহার করেছি তা ভাগ করে নিলাম।


4
এটি স্বীকৃত উত্তর নয় এবং বেশি ভোট না পাওয়া এই বিষয়টি আমাকে দুঃখজনক, সবচেয়ে তথ্যবহুল করে তোলে এবং ধারাবাহিকভাবে হ্যান্ডলারদের যুক্ত করে না। +1
ক্রিস ওকেলি

1
দুর্দান্ত উত্তর, বাইন্ডিং যুক্ত করার জন্য উন্মুক্ত কলব্যাক থাকা এমন একটি বিষয় যা আপনি এড়াতে চান
জে রিজি

1
আমার জন্য এটি কাজ করে যখন ইভেন্টটি কীডাউন হয় এবং আমি ট্যাগনামের সমস্ত শর্তগুলি সরিয়ে এবং ক্লিক
ট্রিগারটি

1
এই কাজটি করার জন্য আমাকে "কীডাউন" এ পরিবর্তন করতে হয়েছিল (ওএস এক্স 10.8.4, ক্রোম 29 এবং ফায়ারফক্স 23 তে পরীক্ষা করা হয়েছে)।
natebeaty

1
যেহেতু এটি একটি পুরানো উত্তর, এটি লক্ষ করার মতো যে .delegate()jQuery 3.0 এ অবমূল্যায়ন করা হয়েছিল, সুতরাং .on()(1.7 সাল থেকে পাওয়া যায়) সম্ভবত এই পর্যায়ে যাওয়ার পথ।
জিঙ্গলেস্টুলা

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

এটি JQuery UI (1.8.1) এর সর্বশেষ সংস্করণটির সাথে সুন্দরভাবে কাজ করে। আপনি প্রথমে পরিবর্তে ব্যবহার করতে পারেন: সর্বশেষে আপনি কোন বোতামটি ডিফল্ট হিসাবে সেট করতে চান তার উপর নির্ভর করে।

এই সমাধানটি, উপরে বাছাইকৃতটির সাথে তুলনা করে, ব্যবহারকারীর জন্য কোন বোতামটি ডিফল্ট তা দেখানোর সুবিধা রয়েছে। ব্যবহারকারী বোতামগুলির মধ্যে টিএবি করতে পারেন এবং ENTER টিপে বর্তমানে ফোকাসের অধীনে থাকা বোতামটি ক্লিক করবে।

চিয়ার্স।


এবং যদি আপনার ডায়ালগের এক বা একাধিক পাঠ্য প্রবেশের ক্ষেত্র থাকে? আমি ব্যবহারকারীর ব্যবহারকারীর নাম এবং পাসওয়ার্ড ক্ষেত্রে থাকা অবস্থায় লগইন ডায়লগটি জমা দেওয়ার ENTER চাই।
ডেভিড হার্কনেস

1
@ ডেভিড যদি আপনি jQuery ডায়ালগ বোতাম ব্যবহার করেন তবে কেবল ফর্মের সাধারণ ইনপুট জমা বোতামটি আড়াল করুন। যেমন। দৃশ্যমানতা: লুকানো;
দামো

6

এই কাজটি আরও সাধারণভাবে করার একটি অশোধিত তবে কার্যকর উপায়:

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

আরও উন্নত ক্ষেত্রে এটি কার্যকর করার জন্য উন্নত করার উপায় রয়েছে। উপরের কোড সহ এটি এন্টার চাপলে ট্রাই করার বোতাম হিসাবে ডায়ালগের প্রথম বোতামটি স্বয়ংক্রিয়ভাবে বেছে নেবে। এছাড়াও এটি ধরে নিয়েছে যে নির্দিষ্ট সময়ে কেবলমাত্র একটি সক্রিয় ডায়ালগ রয়েছে যা নাও হতে পারে। তবে আপনি ধারণা পেতে পারেন।

দ্রষ্টব্য: উপরে উল্লিখিত হিসাবে, যে বোতামটি এন্টার টিপুন তা আপনার সেটআপের উপর নির্ভরশীল। সুতরাং, কিছু ক্ষেত্রে আপনি: প্রথম নির্বাচনকারীটি .ফাইন্ড পদ্ধতিতে এবং অন্যদের মধ্যে আপনি: শেষ নির্বাচকটি ব্যবহার করতে চাইতে পারেন।


আমি মনে করি সেখানে। ('। Ui- কথোপকথন') এর মতো একটি প্রথম () হওয়া উচিত। অন্যথায় আপনি যদি ডায়ালগের সমস্ত বোতামের ক্লিককে একাধিক করে ট্রিগার করতে পারেন।
জাস্টিনস্টল

@ তেজ - না, এটি প্রতিটি ডায়ালগের সাথে একটি কীআপ ইভেন্ট হ্যান্ডলার সংযুক্ত করে, তবে কীটি চাপলে কেবলমাত্র ডায়ালগটিতে ফোকাসযুক্ত উপাদান থাকে ইভেন্টটি গ্রহণ করবে।
ডেভিড হারকনেস

6

এই উত্তরের মতো কী কোডগুলি শোনার পরিবর্তে (যা আমি কাজ করতে পারিনি) আপনি ডায়ালগের মধ্যে ফর্মের জমা দেওয়ার ইভেন্টটি আবদ্ধ করতে পারেন এবং এরপরে এটি করতে পারেন:

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

নোট করুন যে বিভিন্ন ব্রাউজারগুলি এন্টার কী আলাদাভাবে পরিচালনা করে এবং কিছু কিছু প্রবেশের সময় সবসময় জমা দেয় না।


এটি সবচেয়ে মার্জিত উত্তর মত মনে হচ্ছে।
ড্যান

যখন একই ডায়ালগটিতে আমার তিন বা ততোধিক ইনপুট থাকে তখন এটি কাজ করে না। কেন জানি না।
প্রোগ্রামাদ

6

বেন ক্লেটন এরতমতমতম এবং সংক্ষিপ্ততম এবং কোনও জিকিউরি ডায়ালগ শুরু করার আগে এটি আপনার সূচী পৃষ্ঠার শীর্ষে স্থাপন করা যেতে পারে। তবে, আমি এটি উল্লেখ করতে চাই যে "। লাইভ" অবমূল্যায়ন করা হয়েছে। পছন্দসই কর্মটি এখন ".on"। আপনি যদি "। লাইভ" এর মতো কাজ করতে ".অন" চান তবে ইভেন্ট হ্যান্ডলারটি সংযুক্ত করতে আপনাকে প্রতিনিধি ইভেন্টগুলি ব্যবহার করতে হবে। এছাড়াও, আরও কয়েকটি জিনিস ...

  1. আপনাকে প্রকৃত কী কোডটি মনে রাখতে হবে না বলে প্রবেশের কীটি পরীক্ষা করার জন্য আমি ui.keycode.ENTER পদ্ধতিটি ব্যবহার করতে পছন্দ করি।

  2. ক্লিক নির্বাচকের জন্য "$ ('। Ui- ডায়ালগ-বাটনপেন বোতাম: প্রথমে', $ (এটি))" ব্যবহার করা পুরো পদ্ধতিটিকে জেনেরিক করে তোলে।

  3. আপনি "মিথ্যা প্রত্যাবর্তন" যোগ করতে চান; ডিফল্ট প্রতিরোধ এবং প্রচার বন্ধ।

এক্ষেত্রে...

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

4

আমি সহজ সম্পর্কে জানি না, তবে সাধারণভাবে আপনি কোন বোতামটির বর্তমান ফোকাস রয়েছে তা ট্র্যাক করবেন। যদি ফোকাসটি অন্য একটি নিয়ন্ত্রণে পরিবর্তিত হয়, তবে "বোতাম ফোকাস" সর্বশেষে ফোকাস থাকা বোতামটিতে থাকবে। সাধারণত, আপনার ডিফল্ট বোতামটিতে "বোতাম ফোকাস" শুরু হবে। একটি ভিন্ন বোতামে ট্যাবিং "বোতাম ফোকাস" পরিবর্তন করবে। আপনাকে সিদ্ধান্ত নিতে হবে যে কোনও অন্য ফর্ম উপাদানটিতে নেভিগেট করা হলে "বোতাম ফোকাস" পুনরায় ডিফল্ট বোতামে পুনরায় সেট করা হবে। উইন্ডোতে আসল ফোকাসটি হারাতে ফোকাসযুক্ত বোতামটি নির্দেশ করতে আপনার সম্ভবত ব্রাউজারের ডিফল্ট ব্যতীত অন্য কিছু ভিজ্যুয়াল সূচকও প্রয়োজন।

আপনার একবার বোতাম ফোকাস যুক্তিটি ডাউন হয়ে গেলে এবং প্রয়োগ করা হয়ে যায়, তারপরে আমি সম্ভবত ডায়ালগটিতে একটি মূল হ্যান্ডলার যুক্ত করব এবং এটি বর্তমানে "ফোকাসড" বোতামের সাথে যুক্ত ক্রিয়াকলাপটিকে অনুরোধ করব।

সম্পাদনা : আমি এই ধারণাটি তৈরি করছি যে আপনি ফর্ম উপাদানগুলি পূরণ করতে যে কোনও সময় প্রবেশ করতে সক্ষম হবেন এবং "বর্তমান" বোতামের ক্রিয়াটিকে প্রাধান্য দিন। বোতামটি আসলে ফোকাস করার সময় আপনি যদি এই আচরণটি চান তবে আমার উত্তরটি খুব জটিল।


3

আমি এই সমাধানটি পেয়েছি, এটি আইই 8, ক্রোম 23.0 এবং ফায়ারফক্স 16.0 এ কাজ করে

এটি রবার্ট শ্মিড্ট মন্তব্যের ভিত্তিতে।

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

আমি আশা করি এটি কারও সাহায্য করবে।


ধন্যবাদ! সে আমাকে অনেক সময় বাঁচিয়েছে! :)
রাহুল দেশাই

3

কখনও কখনও আমরা ব্রাউজারটি ইতিমধ্যে সমর্থন করে তার মৌলিকটি ভুলে যাই:

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

এর ফলে ENTERকীটি ফর্মটি জমা দেবে।


2

আমি এইভাবে করেছি ...;) আশা করি এটি কারওর জন্য সহায়ক হবে ..

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

2

বোতামটির ক্লিক হ্যান্ডলারের ক্লিকটি ট্রিগার করতে এটি কাজ করা উচিত। এই উদাহরণটি ধরে নিয়েছে যে আপনি jquery.uthorate প্লাগইনটি ব্যবহার করতে ডায়লগটিতে ইতিমধ্যে ফর্মটি সেট আপ করেছেন। তবে সহজেই মানিয়ে নেওয়া যায়।

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...

            }
}

1

আমি বুঝতে পেরেছি যে এরই মধ্যে অনেক উত্তর রয়েছে তবে আমি স্বাভাবিকভাবেই বিবেচনা করি যে আমার সমাধানটি সবচেয়ে নিকটতম এবং সম্ভবত সবচেয়ে সংক্ষিপ্ততম। এটির সুবিধা রয়েছে যে এটি ভবিষ্যতে যে কোনও সময় তৈরি হওয়া কোনও সংলাপে কাজ করে।

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

1
আরে আপডেট করার জন্য ধন্যবাদ, একটি ছোট প্রশ্ন, এখানে ".োক-বাটন" কী? আপনি যে ক্লাসটি ডিফল্ট বোতামটিতে প্রয়োগ করতে চান সেটি কি প্রবেশের সাথে ক্লিক করতে চান?
ইউআইডি

দুঃখিত যদি আপনি প্রশ্নটি সিলি পেয়ে থাকেন .. জেএস / জিকুয়েরিতে আমি খুব নতুন
ইউআইডি

@ বেনক্লেটন: আপনি উত্তরটি jQueryUI ডায়ালগের প্রসঙ্গে রাখলে এই উত্তরটির উন্নতি হতে পারে।
মাইকেল পটার

1

আমি যা করেছি তা এখানে:

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

এই ক্ষেত্রে, মাইফর্ম হ'ল jQuery অবজেক্ট যা ফর্মটির এইচটিএমএল রয়েছে (দ্রষ্টব্য, সেখানে কোনও "ফর্ম" ট্যাগ নেই ... আপনি যদি "এন্টার" টিপেন তখন পুরো স্ক্রিনে সেগুলি রিফ্রেশ হবে)।

যখনই ব্যবহারকারী ফর্মের মধ্যে থেকে "প্রবেশ" টিপুন এটি "ওকে" বোতামটি ক্লিক করার সমতুল্য হবে।

এটি ইতিমধ্যে হাইলাইট করা "ওকে" বোতামের সাহায্যে ফর্মটি খোলা থাকার বিষয়টি এড়িয়ে যায়। যদিও ক্ষেত্রবিহীন ফর্মগুলির জন্য এটি ভাল হবে, আপনার যদি স্টাফ পূরণের জন্য ব্যবহারকারী প্রয়োজন হয়, তবে আপনি সম্ভবত প্রথম ক্ষেত্রটি হাইলাইট করতে চান।


এটি সর্বাধিক যৌক্তিক সমাধান। আরও ভাল যদি আপনি কোনও আইডি দিয়ে আপনার বোতামটি ঘোষণা করেন এবং নির্বাচককে সন্ধান () এ পাস করেন তবে কোনওভাবেই এটি কার্যকর হয়। +1
ভিনসেন্ট

1

কাজ ও সম্পন্ন

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

0

আপনি যদি বাটন উপাদান নির্বাচনকারী জানেন:

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

আপনার জন্য কৌশলটি করা উচিত। এটি ঠিক আছে বোতামটি ফোকাস করবে এবং প্রবেশ হিসাবে এটি 'ক্লিক' করবে, যেমনটি আপনি প্রত্যাশা করেছিলেন। নেটিভ ইউআই ডায়ালগগুলিতে এটি একই কৌশল।


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

0

আমি এই সমস্যার জন্য একটি সহজ সমাধান খুঁজে পেয়েছি:

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

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

এটি আমার জন্য কাজ করে মহান..


আপনি যুক্তি হিসাবে প্রয়োগ করতে যুক্তি হিসাবে। ('# ডায়ালগআইডি') ডায়ালগ () এর জন্য অন্তর্ভুক্ত করা ভাল well অন্যথায় $ (এটি) .ক্লোজ () টিবটনের অভ্যন্তরে সঠিক প্রসঙ্গ থাকবে না।
ডেভ

0

এই সমাধানগুলির কোনওোটাই 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");
                   };
               });
    }
});

0

ডায়ালগ ডিআইভি শরীরে যুক্ত হওয়ায় দেহের নীচে ব্যবহার করা হয়, সুতরাং শরীর এখন কীবোর্ড ইভেন্টটি শুনবে। এটি IE8,9,10, মোজিলা, ক্রোমে পরীক্ষা করেছে।

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

0

কারণ মন্তব্য পোস্ট করার মতো যথেষ্ট খ্যাতি আমার নেই।

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

বেসএমএম # 35 দ্বারা পরিবর্তিত উত্তরটিও ডায়লগটি বন্ধ করতে এস্কেপ এ যুক্ত করুন।


-1

এটি দুর্দান্ত কাজ করে ধন্যবাদ আপনাকে !!!

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


হুম ... আপনার পোস্টে নতুন কিছু (আগের উত্তরগুলির তুলনায়)?
ক্লিওপাত্রা

-1

আপনার বোতামগুলির ক্লাস দিন এবং সেগুলি স্বাভাবিক পদ্ধতিতে নির্বাচন করুন:

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

    });

  }
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.