एक बार बूटस्ट्रैप मोडल में किसी विशेष क्षेत्र के लिए फ़ोकस को कैसे सेट करें, यह दिखाई देता है

182

मैंने बूटस्ट्रैप मॉडल्स के संबंध में कुछ प्रश्नों को देखा है, लेकिन वास्तव में ऐसा कोई नहीं है, इसलिए मैं आगे जाऊंगा।

मेरे पास एक मोडल है जिसे मैं onclick कहता हूं जैसे ...

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

यह ठीक काम करता है, लेकिन जब मैं मॉडल दिखाता हूं तो मैं पहले इनपुट तत्व पर ध्यान केंद्रित करना चाहता हूं ... हो सकता है कि पहले इनपुट तत्व में #photo_name की आईडी हो।

इसलिए मैंने कोशिश की

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

लेकिन इसका कोई फायदा नहीं हुआ। अंत में, मैंने 'शो' इवेंट के लिए बाध्यकारी की कोशिश की, लेकिन फिर भी, इनपुट ध्यान केंद्रित नहीं करेगा। अंत में सिर्फ परीक्षण के लिए, जैसा कि मुझे संदेह था कि यह js लोडिंग ऑर्डर के बारे में है, मैंने एक सेटटाइमआउट में यह देखने के लिए रखा कि क्या मैं एक सेकंड में देरी करता हूं, क्या फोकस काम करेगा, और हां, यह काम करता है! लेकिन यह तरीका जाहिर तौर पर बकवास है। वहाँ एक setTimeout का उपयोग किए बिना नीचे के रूप में एक ही प्रभाव के लिए कोई रास्ता नहीं है?

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

javascript twitter-bootstrap modal-dialog

— jdkealy
स्रोत

371

इसे इस्तेमाल करे

यहाँ पुराना DEMO है :

संपादित करें: (यहां बूटस्ट्रैप 3 और jQuery 1.8.3 के साथ एक कार्यशील डेमो है )

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

बूटस्ट्रैप 3 को शुरू करने के लिए show.bs.modal इवेंट का उपयोग करने की आवश्यकता है:

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

— gaurang171
स्रोत

3

धन्यवाद। मैंने "दिखाया गया" इवेंट नहीं देखा था। ठीक वही जो मेरे द्वारा खोजा जा रहा था।

— jdkealy

धन्यवाद! डेमो अब काम नहीं करता है लेकिन स्निपेट करता है।

— क्रेकर

@keyur पर codebins.com इस घटना को मोडल के बाद शुरू होता है प्रदर्शित कर रहा है, अगर मैं शुरू होता है घटना के लिए है क्या से पहले मॉडल प्रदर्शित किया जाता है

— थॉमस शेल्बी

okej, मुझे 'show.bs.modal' के बजाय 'show.bs.modal' का उपयोग करना चाहिए

— थॉमस शेल्बी

फ़ोकस हैंडलर के बारे में, आपको थोड़ी देरी की आवश्यकता होती है, इसलिए आपको इसे सेट करना होगा, लेकिन इस तरह से इन्टरवल सामान में: setInterval (फ़ंक्शन () {$ ("# आपका इनपुट"); फ़ोकस ();};}, 50);

— गुयेन मिन्ह हिएन

76

बस यह कहना चाहता था कि बूटस्ट्रैप 3 इसे थोड़ा अलग तरीके से संभालता है। घटना का नाम "दिखाया गया है ।bs.modal"।

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

या इस तरह पहले दिखाई इनपुट पर ध्यान केंद्रित:

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

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

— डेविड बेक
स्रोत

यह मेरे लिए काम किया है, तो मैं .on इस्तेमाल किया ( 'show.bs.modal') नहीं दिखाया

— पीटर ग्राहम

जब मैंने देखा कि इसे "show.bs ..." के बजाय "show.bs ..." होना चाहिए, तो बहुत समय लग गया। शो मेरे लिए काम नहीं करता है। वास्तव में उनके दोनों काम कर रहे हैं और वे अलग-अलग कार्यक्रम हैं। क्षमा करें मेरे पहले वाक्य को अनदेखा करें।

— व्लादीन

@PeterGraham शायद आप बूटस्ट्रैप 2 का उपयोग कर रहे हैं?

— FindOutIslamNow

10

मैं सभी लेआउट को पकड़ने और पहले इनपुट पर ध्यान केंद्रित करने के लिए अपने लेआउट में इसका उपयोग कर रहा हूं

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

— जो बीम्स
स्रोत

मिठाई। मेरा पहला इनपुट तत्व हालांकि छिपा हुआ है, इसलिए मुझे लगता है कि मुझे करना होगा: $ (यह) .find ('इनपुट: नहीं ([प्रकार = छिपा हुआ))')। फोकस ();

— jdkealy 17

2

या$(this).find('input:visible').focus();

— स्टीफन मुलर

2

$ (यह) .find ('इनपुट') होना चाहिए। पहला () फ़ोकस () यदि आप सभी इनपुट्स पर ध्यान केंद्रित नहीं करना चाहते हैं

— Jacek Pietal

9

बूटस्ट्रैप 3 के साथ भी यही समस्या थी, जब मैं लिंक पर क्लिक करता हूं, तो ध्यान केंद्रित करता हूं, लेकिन जब जावास्क्रिप्ट के साथ घटना को ट्रिगर नहीं करता हूं। समाधान:

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

शायद यह एनीमेशन के बारे में कुछ है!

— एलेजांद्रो फियोर
स्रोत

मोडल एनीमेशन के साथ निश्चित रूप से कुछ चल रहा है। यहां तक कि अगर मैं विकल्पों में मोडल फीका बंद कर देता हूं, तो यह रेंडर नहीं करेगा यदि मोडल पॉपअप के ठीक बाद एक सीपीयू गहन कार्य है। इस टाइमआउट का उपयोग करना एकमात्र तरीका है जिससे मैं इसे काम में ला सकूं।

— 18

8

मुझे "show.bs.modal" ईवेंट को पकड़ने में समस्या थी .. और यह मेरा समाधान है जो एकदम सही है।

इसके बजाय सरल ():

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

प्रत्यायोजित तत्व के साथ () पर प्रयोग करें:

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

— मिशल मेसजको
स्रोत

6

ऐसा इसलिए लगता है क्योंकि मोडल एनिमेशन सक्षम है ( fadeसंवाद के वर्ग में), कॉल करने के बाद .modal('show'), संवाद तुरंत दिखाई नहीं देता है, इसलिए यह इस समय ध्यान केंद्रित नहीं कर सकता है।

मैं इस समस्या को हल करने के दो तरीके सोच सकता हूं:

fadeक्लास से निकालें , इसलिए कॉल करने के तुरंत बाद संवाद दिखाई देता है .modal('show')। डेमो के लिए आप http://codebins.com/bin/4ldqp7x/4 देख सकते हैं । (क्षमा करें @keyur, मैंने गलती से संपादित किया और आपके उदाहरण के नए संस्करण के रूप में सहेजा गया)
@Keyur ने जो लिखा है, वैसी घटना focus()में कॉल करें shown।

— SAPikachu
स्रोत

धन्यवाद। मेरी इच्छा है कि मैं दो उत्तरों को स्पष्ट कहूं: p। हां, मैं "फीका" भी नहीं चाहता था, इसलिए उस काम को हटा दिया। मैंने फीका हटा दिया और दिखाई गई घटना को जोड़ दिया।

— jdkealy

4

मैंने प्रत्येक घटना को स्वचालित रूप से कॉल करने के लिए एक गतिशील तरीका बनाया है। किसी फ़ील्ड पर ध्यान केंद्रित करना सही है, क्योंकि यह ईवेंट को केवल एक बार कॉल करता है, उपयोग के बाद इसे हटा रहा है।

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

तो, आप हर बार की घटनाओं को हटाने के बारे में चिंता किए बिना लोड करने के लिए एक ही मोडल का उपयोग कर सकते हैं।

— डैनिलो कोलासो
स्रोत

मुझे इसी की जरूरत थी! धन्यवाद भाई!

— डेवलपर

3

मुझे बूटस्ट्रैप 3 के साथ भी यही समस्या थी और इस तरह से हल किया गया था:

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

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

— edercortes
स्रोत

0

बूटस्ट्रैप ने एक लोड की गई घटना को जोड़ा है।

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

मोडल पर 'load.bs.modal' ईवेंट कैप्चर करें

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

— भारत
स्रोत

0

बूटस्ट्रैप मोडल शो इवेंट

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

})

— AdminDev826
स्रोत

-1

थोड़ा क्लीनर और अधिक मॉड्यूलर समाधान हो सकता है:

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

उम्मीद है की वो मदद करदे..

— पुनर्जीवित
स्रोत

ऐसे कोई फंक्शन सक्सेस नहीं।

— अविनाश