বুটস্ট্র্যাপ মডেলটিতে কোনও নির্দিষ্ট ক্ষেত্রের জন্য কীভাবে ফোকাস সেট করা যায়, এটি একবার উপস্থিত হয়

Question

বুটস্ট্র্যাপ মডেলগুলির বিষয়ে আমি বেশ কয়েকটি প্রশ্ন দেখেছি, তবে এর মতো কোনওটিই নয়, তাই আমি এগিয়ে যাব।

আমার এমন একটি মডেল রয়েছে যা আমি অনক্লিককে এমনভাবে বলি ...

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

এটি দুর্দান্ত কাজ করে, তবে আমি যখন মডেলটি দেখি আমি প্রথম ইনপুট উপাদানটির দিকে ফোকাস করতে চাই ... যদি প্রথম ইনপুট উপাদানটিতে # ফটো_নামের আইডি থাকে।

তাই চেষ্টা করেছি

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

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

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

Answer 1

এটা চেষ্টা কর

এখানে পুরানো ডেমো :

সম্পাদনা: ( বুটস্ট্র্যাপ 3 এবং jQuery 1.8.3 সহ এখানে একটি কার্যকারী ডেমো রয়েছে)

$(document).ready(function() {
    $('#modal-content').modal('show');
    $('#modal-content').on('shown', function() {
        $("#txtname").focus();
    })
});

বুটস্ট্র্যাপ 3 শুরু করার সময় দেখানো.বস.মডাল ইভেন্টটি ব্যবহার করা দরকার:

$('#modal-content').on('shown.bs.modal', function() {
    $("#txtname").focus();
})

Comments

ধন্যবাদ. আমি "দেখানো" ইভেন্টটি দেখিনি। ঠিক আমি খুঁজছেন ছিল কি.

— jdkealy

ধন্যবাদ! ডেমো আর কাজ করে না তবে স্নিপেট করে।

— ক্রেকার

কোডবিনস.কম এ কিকিআর এই মডেলটি প্রদর্শন করার পরে শুরু হয়, মডেল প্রদর্শিত হওয়ার আগে যদি আমার ইভেন্টটি শুরু করতে হয়

— থমাস শেলবি

ঠিক আছে, আমার 'show.bs.modal' এর পরিবর্তে 'show.bs.modal' ব্যবহার করা উচিত

— টমাস শেলবি

ফোকাস হ্যান্ডলার সম্পর্কে, এটি কিছুটা বিলম্ব প্রয়োজন যাতে আপনার অবশ্যই এটির মতো একটি সেটআইন্টারওয়াল স্টাফগুলিতে থাকে: সেটইন্টারভালভাল (ফাংশন () {$ ("# আপনার ইনপুট") focus ফোকাস ();}, 50);

— এনগুইন মিন হিয়েন

Answer 2

কেবল বলতে চেয়েছিলেন যে বুটস্ট্র্যাপ 3 এটি কিছুটা ভিন্নভাবে পরিচালনা করে। ইভেন্টের নাম "দেখানো.বস.মডাল"।

$('#themodal').on('shown.bs.modal', function () {
   $("#txtname").focus();
});

বা প্রথম দৃশ্যমান ইনপুটটির উপর ফোকাস রাখুন:

.modal('show').on('shown.bs.modal', function ()
{
    $('input:visible:first').focus();
})

http://getbootstrap.com/javascript/#modals

Comments

এটি আমার জন্য কাজ করে যদি আমি .on ('show.bs.modal') না দেখানো হয়

— পিটার গ্রাহাম

এটি অনেক সময় নিয়েছে যখন আমি দেখলাম এটি "show.bs ..." এর পরিবর্তে "show.bs ..." হওয়া উচিত। শো আমার জন্য কাজ করে না। আসলে তাদের দুজনেই কাজ করছে এবং সেগুলি বিভিন্ন ঘটনা। দুঃখিত আমার প্রথম বাক্যটি উপেক্ষা করুন।

— ভ্লাদাইন

@ পিটারগ্রাহাম সম্ভবত আপনি বুটস্ট্র্যাপ 2 ব্যবহার করছেন?

— করুনউইটস্ল্যাসম

Answer 3

আমি আমার লেআউটে এটি সমস্ত মডেল ক্যাপচার করতে এবং প্রথম ইনপুটটিতে ফোকাস করতে ব্যবহার করছি

  $('.modal').on('shown', function() {
     $(this).find('input').focus();
  });

Comments

মিষ্টি। যদিও আমার প্রথম ইনপুট উপাদানটি লুকানো আছে, তাই আমি মনে করি আমার এটি করতে হবে: ind (এটি) ind ফাইন্ড ('ইনপুট: না ([টাইপ = লুকানো])') focus

— jdkealy

বা$(this).find('input:visible').focus();

— স্টিফান মুলার

$ (এটি) .ফাইন্ড ('ইনপুট') হওয়া উচিত first প্রথমে () ফোকাস () আপনি যদি সমস্ত ইনপুট ফোকাস করতে না চান

— জেসেক পিটাল

Answer 4

বুটস্ট্র্যাপ 3 নিয়ে আমার একই সমস্যা ছিল, আমি যখন লিঙ্কটি ক্লিক করি তখন ফোকাস করি, তবে জাভাস্ক্রিপ্ট দ্বারা ইভেন্টটি ট্রিগার করার সময় নয় not সমাধান:

$('#myModal').on('shown.bs.modal', function () {
    setTimeout(function(){
        $('#inputId').focus();
    }, 100);
});

সম্ভবত এটি অ্যানিমেশন সম্পর্কে কিছু!

Comments

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

— krx

Answer 5

"Show.bs.modal" ইভেন্টটি ধরতে আমার সমস্যা হয়েছিল .. এবং এটি আমার সমাধান যা নিখুঁতভাবে কাজ করে ..

পরিবর্তে সহজ ():

$('#modal').on 'shown.bs.modal', ->

প্রতিনিধিত্বকারী উপাদান সহ () ব্যবহার করুন:

$('body').on 'shown.bs.modal', '#modal', ->

Answer 6

দেখে মনে হচ্ছে কারণ মোডাল অ্যানিমেশনটি সক্ষম হয়েছে ( fadeকথোপকথনের শ্রেণিতে), কল করার পরে .modal('show'), ডায়ালগটি তত্ক্ষণাত্ দৃশ্যমান হয় না, তাই এটি এই মুহুর্তে ফোকাস পেতে পারে না।

আমি এই সমস্যাটি সমাধানের দুটি উপায় সম্পর্কে ভাবতে পারি:

1. fadeক্লাস থেকে সরান , তাই ডায়ালগ কল করার পরে অবিলম্বে দৃশ্যমান .modal('show')। আপনি ডেমোর জন্য http://codebins.com/bin/4ldqp7x/4 দেখতে পারেন । (দুঃখিত @ কিউর, আমি ভুলভাবে আপনার উদাহরণের নতুন সংস্করণ হিসাবে সম্পাদনা করেছি এবং সংরক্ষণ করেছি)
2. কল focus()মধ্যে shown@keyur কি লিখেছে মত ইভেন্ট।

Comments

ধন্যবাদ. আমি আশা করি কর্নার হিসাবে আমি দুটি উত্তর ট্যাগ করতে পারি: পি। হ্যাঁ, আমি এমনকি "বিবর্ণ" কার্যকর করতে চাইনি, সুতরাং এটি কার্যকর করে। আমি বিবর্ণ মুছে ফেলা এবং প্রদর্শিত ইভেন্টটি যুক্ত করেছি।

— jdkealy

Answer 7

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

function modalEvents() {
    var modal = $('#modal');
    var events = ['show', 'shown', 'hide', 'hidden'];

    $(events).each(function (index, event) {
        modal.on(event + '.bs.modal', function (e) {
            var callback = modal.data(event + '-callback');
            if (typeof callback != 'undefined') {
                callback.call();
                modal.removeData(event + '-callback');
            }
        });
    });
}

আপনাকে কেবল modalEvents()ডকুমেন্টের জন্য প্রস্তুত কল করতে হবে ।

ব্যবহার করুন:

$('#modal').data('show-callback', function() {
    $("input#photo_name").focus();
});

সুতরাং, প্রতিবার ইভেন্টগুলি সরানোর বিষয়ে চিন্তা না করে আপনি যা চান তা লোড করতে আপনি একই মডেলটি ব্যবহার করতে পারেন।

Comments

এটাই তো আমার দরকার! ধন্যবাদ ভাই!

— বিকাশকারী

Answer 8

বুটস্ট্র্যাপ 3 নিয়ে আমারও একই সমস্যা ছিল এবং এর মতো সমাধান হয়েছে:

$('#myModal').on('shown.bs.modal', function (e) {
    $(this).find('input[type=text]:visible:first').focus();
})

$('#myModal').modal('show').trigger('shown');

Answer 9

বুটস্ট্র্যাপ একটি লোড ইভেন্ট যুক্ত করেছে।

https://getbootstrap.com/docs/3.3/javascript/#modals

মডেলে 'loaded.bs.modal' ইভেন্টটি ক্যাপচার করুন

$('#mymodal').on('loaded.bs.modal', function(e) {
  // do cool stuff here all day… no need to change bootstrap
})

Answer 10

বুটস্ট্র্যাপ মডেল শো ইভেন্ট

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})

Answer 11

একটু ক্লিনার এবং আরও মডিউলার সমাধান হতে পারে:

$(document).ready(function(){
    $('.modal').success(function() { 
        $('input:text:visible:first').focus();
    });  
});

বা পরিবর্তে উদাহরণ হিসাবে আপনার আইডি ব্যবহার করুন:

$(document).ready(function(){
    $('#modal-content').modal('show').success(function() {
        $('input:text:visible:first').focus();
    });  
});

আশা করি এইটি কাজ করবে..

Comments

এ জাতীয় কোনও কার্যকারিতা নেই।

— অবিনাশ