दिखाए जाने के बाद बूटस्ट्रैप मोडल में पहले टेक्स्ट इनपुट पर ध्यान कैसे सेट करें

Question

मैं एक गतिशील बूटस्ट्रैप मोडल लोड करता हूं और इसमें कुछ पाठ इनपुट होते हैं। मैं जिस मुद्दे का सामना करता हूं, मैं चाहता हूं कि कर्सर इस मोडल में पहले इनपुट पर ध्यान केंद्रित करे, और यह डिफ़ॉल्ट रूप से नहीं हो रहा है।
इसलिए मैंने इसे करने के लिए यह कोड लिखा है:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

लेकिन अब यह एक पल के लिए इनपुट पर ध्यान केंद्रित करता है फिर स्वचालित रूप से चला जाता है, ऐसा क्यों हो रहा है और कैसे हल करना है?

Comments

आप jsfiddle.net पर एक डेमो प्रदान कर सकते हैं ?

— अपरिष्कृत

इसके लिए कुछ समय निर्धारित करने का प्रयास करें, कुछ और हस्तक्षेप हो सकता है। setTimeout(function() { /* Your code */ }, 100);

— क्वर्टी

क्या आप मेरे लिए यह कोशिश कर सकते हैं ... var index = 0; $ ('# modalContainer')। ('शो', फंक्शन () {इंडेक्स = 1;}) पर; अगर (सूचकांक) {$ ('इनपुट: टेक्स्ट: दृश्यमान: पहला'); फोकस (); }

— चिराग घियाद

ट्विटर बूटस्ट्रैप मोडल इनपुट फील्ड फोकस

— मुहम्मद रेहान सईद

Answer 1

@scumah के पास आपके लिए जवाब है: Twitter बूटस्ट्रैप - क्लिक पर एक मॉडल के अंदर textarea पर ध्यान दें

बूटस्ट्रैप 2 के लिए

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

अपडेट: बूटस्ट्रैप 3 के लिए

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

========== अपडेट ======

एक प्रश्न के जवाब में, आप एक ही पृष्ठ पर कई मॉडल्स के साथ इसका उपयोग कर सकते हैं यदि आप अलग-अलग डेटा-लक्ष्य निर्दिष्ट करते हैं, तो फॉर्म इनपुट क्षेत्रों की आईडी से मिलान करने और अपडेट करने के लिए अपने मॉडल्स आईडी का नाम बदलें, और अंत में इन नए से मिलान करने के लिए अपने जेएस को अपडेट करें। आईडी: http://jsfiddle.net/panchroma/owtqhpzr/5/
देखें

एचटीएमएल

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

जे एस

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

Comments

यह तभी काम करता है जब पृष्ठ पर एक मोडल हो? क्या होगा अगर एक से अधिक?

— रमेश पारीक

महान, त्वरित प्रतिक्रिया! मैंने एक मूर्खतापूर्ण त्रुटि की, अब काम करता है!

— रमेश पारीक

+1 मेरे कोड को "शो" से "शो" में बदलना, जैसा कि मैंने आपके उत्तर में लगभग एक घंटे के बाद यह काम करने की कोशिश की।

— गैंबोआ

जब jquery सत्यापन आग हो जाती है तो यह अधिकतम कॉलस्टैक त्रुटि देता है! इसलिए यह मेरे किसी काम का नहीं है।

— वंदिता

@Vandita, यदि आप codepen.io पर एक पेन शुरू करना चाहते हैं, जो आपके द्वारा बताई गई समस्या का चित्रण करता है तो मुझे आपके लिए इसे देखकर खुशी होगी।

— डेविड टायरोआ

Answer 2

मुझे यह करने का सबसे अच्छा तरीका मिला, बिना jQuery के।

<input value="" autofocus>

अच्छी तरह से काम।

यह एक html5 विशेषता है। सभी प्रमुख ब्राउज़रों द्वारा समर्थित।
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Comments

इस काम को पाने के लिए कुछ घंटों का समय बिताने के बाद इसे कैसे (क्लिक या हैंडलर्स पर) करना चाहिए मुझे केवल एक ही तरीका मिला जो काम करता है वह है html5 ऑटोफोकस विशेषता: <input type="text" class="form-control" placeholder="" autofocus>

— lot0logs

यहाँ आप इसे MVC3 नियंत्रण पर कैसे कर सकते हैं: @Html.TextBoxFor(m => m.UserName, new { @autofocus="" })

— पिस्सू

यह मेरे लिए काम नहीं किया है ... बूटस्ट्रैप मोडल दिखाने के बाद इनपुट फोकस को खो देता है

— डिएगो कोटिनी

मैं भी ऑटोफोकस का उपयोग करते समय बूटस्ट्रैप मोडल दिखाई देने के बाद एक पल के लिए इनपुट लाभ ध्यान केंद्रित करता हूं। हालाँकि, इनपुट फिर फोकस खो देता है। .On () हैंडलर को लागू करना था।

— मूलांक

यदि आप tabdindex="-1"अपने मोडल से हटाते हैं तो यह काम करता है , हालाँकि यह केवल एक बार ही काम करता है। बंद करना और फिर से खोलना फोकस नहीं करता है।

— मेमेट ऑलसेन

Answer 3

डेविड टिएरोआ का उत्तर सही है, लेकिन काम नहीं करता है क्योंकि मोडल को "फीका" करने का समय आपको इनपुट पर ध्यान केंद्रित करने की अनुमति नहीं देता है। आपको एक देरी बनाने की आवश्यकता है:

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

})

Comments

आप यहीं हैं। आपका समाधान केवल वही है जो काम करता है। मैंने टाइमऑट के लिए एक छोटा मान सेट करने की कोशिश की, लेकिन काम नहीं किया। लगता है कि मोडल "लोडिंग खत्म करता है" 1000ms पर :(

— एनरिक

हाँ, लेकिन आज, मेरी नई परियोजना में, मैंने <input value="" autofocus>इस बार मेरे लिए उपयोग किया और ठीक काम किया, अजीब

— मार्कोस फुरक्विम

दिखाए गए .bs.modal ईवेंट का उपयोग करने के लिए सही है: getbootstrap.com/javascript/#modals-events

— Akhorus

सेटटाइमआउट () का उपयोग करने के बजाय, आप देरी () का उपयोग कर सकते हैं जैसे ... $ ('# textareaID') देरी (1000) .focus ()। Select ()।

— टोनी

निश्चित रूप से सुधार समाधान।

— फ्रैंक थॉमस

Answer 4

सामान्य कोड (नीचे) मेरे लिए काम नहीं करता है:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

मुझे इसका हल मिला :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

यहाँ और देखें

Answer 5

मुझे पता चला कि बूटस्ट्रैप ने उनके पृष्ठ पर निम्नलिखित जानकारी जोड़ी है:

HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण ऑटोफोकस HTML विशेषता का बूटस्ट्रैप मोडल में कोई प्रभाव नहीं पड़ता है। समान प्रभाव प्राप्त करने के लिए, कुछ कस्टम जावास्क्रिप्ट का उपयोग करें:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

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

Answer 6

यह सरल कोड है जो आपके लिए उन सभी पॉपअप पर सबसे अच्छा काम करेगा जिनके पास किसी भी इनपुट फ़ील्ड पर ध्यान केंद्रित करना है

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

Answer 7

मुझे लगता है कि सबसे सही उत्तर, jQuery के उपयोग को मानते हुए, इस पृष्ठ के सभी उत्तरों के पहलुओं का समेकन है, साथ ही उस घटना का उपयोग जो बूटस्ट्रैप से गुजरती है:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

यह बदलने के $(document)लिए $('.modal')या मोडल में एक वर्ग जोड़ने के लिए काम करेगा जो संकेत देता है कि यह ध्यान केंद्रित करना चाहिए, जैसे$('.modal.focus-on-first-input')

Comments

यह सबसे अच्छा, सबसे सामान्य समाधान है जो मैंने यहां देखा है :)

— मार्टिन टी।

यदि आप यह भी चाहते हैं कि यह आसानी से पढ़ने वाले टेक्स्टबॉक्स को अनदेखा कर दे, तो पढ़ने के लिए लाइन को संशोधित करें: $ ('इनपुट: दृश्यमान: सक्षम: नहीं ([पढ़ने के लिए]): पहला', e.target) .focus ();

— डगलस टिम्स

Answer 8

इस कोड को आज़माएं, यह आपके लिए काम कर सकता है

$(this).find('input:text')[0].focus();

Comments

यहाँ मैं क्या उपयोग कर रहा हूँ:$(this).find('input:text').first().focus()

— जिमी

Answer 9

पहला कदम, आपको अपनी autofocusविशेषता को फॉर्म इनपुट पर सेट करना होगा।

<input name="full_name" autofocus/>

और फिर आपको अपने मोडल दिखाए जाने के बाद अपने इनपुट के ऑटोफोकस को सेट करने के लिए घोषणा को जोड़ना होगा।
इस कोड को आज़माएं:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Comments

मैंने $ (इस) .find ('[ऑटोफोकस]') का उपयोग किया। फोकस (); और यह काम करता है

— ग्रीष्मकाल

Answer 10

यदि आप किसी ऐसे मोडल को ऑटो करना चाहते हैं जो खुला था तो आप अपने पैटर्न या काम के लिए इस स्निपेट में डाल सकते हैं जो पहले इनपुट पर केंद्रित होगा:

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

Answer 11

यदि आप एक स्निपेट की तलाश कर रहे हैं जो आपके सभी मॉडल्स के लिए काम करेगा, और पहले से खोले गए 1 इनपुट टेक्स्ट के लिए स्वचालित रूप से खोज करेगा, तो आपको इसका उपयोग करना चाहिए:

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

यदि आपका मोडल अजाक्स का उपयोग करके लोड किया गया है, तो इसके बजाय इसका उपयोग करें:

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

Answer 12

यह सबसे सामान्य उपाय है

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• पृष्ठ भार के बाद DOM में जोड़े गए मॉडल्स के साथ काम करता है
• इनपुट के साथ काम करता है, textarea, चुनें और बटन के साथ नहीं
• ommits छिपा हुआ, अक्षम, आसानी से
• फीका मोडल के साथ काम करता है, सेटइंटरवल की कोई आवश्यकता नहीं है

Answer 13

जब आपका इनपुट / टेक्स्टबॉक्स खुला हो, तो मोडल की टैबइन्डेक्स प्रॉपर्टी को हटाने का प्रयास करें । जब भी आप इनपुट / टेक्स्टबॉक्स को बंद करते हैं, तो इसे वापस सेट करें । यह समस्या रहित बूटस्ट्रैप संस्करण को हल करेगा , और उपयोगकर्ता अनुभव प्रवाह से समझौता किए बिना ।

Answer 14

बूटस्ट्रैप 4 डॉक्स के अनुसार:

HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण ऑटोफोकस HTML विशेषता का बूटस्ट्रैप मोडल में कोई प्रभाव नहीं पड़ता है। उसी प्रभाव को प्राप्त करने के लिए, कुछ कस्टम जावास्क्रिप्ट का उपयोग करें।

उदाहरण के लिए:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

लिंक करें ।

Answer 15

सही फॉर्म तत्व की खोज के लिए ऑटोफोकस का उपयोग करें:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

Answer 16

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• यह "# बटन" है जो मोडल फॉर्म को कॉल करता है,

• "# म्यमोडल" मोडल रूप है,

• "#myinput" वह इनपुट है जिसे आप फोकस करना चाहते हैं