JQuery का उपयोग करके इनपुट फ़ील्ड पर फोकस कैसे सेट करें

Question

निम्नलिखित HTML संरचना को देखते हुए:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

जो पृष्ठ पर कई बार दोहराया जाएगा, मैं कैसे .bottomdiv में इनपुट फ़ील्ड पर ध्यान केंद्रित करता हूं जब कोई उपयोगकर्ता .topdiv में लिंक पर क्लिक करता है ?

मैं वर्तमान में .bottomनीचे दिए गए JQuery कोड का उपयोग कर क्लिक करने पर div को सफलतापूर्वक प्रदर्शित कर रहा हूं , लेकिन यह पता नहीं लगा सकता कि एक ही समय में इनपुट फ़ील्ड पर ध्यान कैसे सेट किया जाए।

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

धन्यवाद!

Comments

आपके प्रश्न का उत्तर दिया गया है, लेकिन यह भी: मुझे लगता है कि आप return false;ईवेंट कॉलबैक के अंत में भी निष्पादित कर रहे हैं ? या function(e) { e.preventDefault(); ..... }? यदि नहीं, तो कॉलबैक को निष्पादित करने के बाद आपका ब्राउज़र बस उस पृष्ठ पर नेविगेट करेगा।

— सिमशुन

@simshaun किस पृष्ठ पर नेविगेट करें?

— रोलिंग स्टोन

आपके उदाहरण में, जब आप उस लिंक पर क्लिक करते हैं तो वह example.com पर जाता है ।

— सिमशुन

ओह, यह सही है, सिर के लिए धन्यवाद!

— रोलिंग स्टोन

Answer 1

पहले इनपुट फ़ील्ड पर फ़ोकस सेट करने के लिए यह आज़माएँ:

$(this).parent().siblings('div.bottom').find("input.post").focus();

Comments

inputऔर के बीच की जगह :first। क्या jQuery का विभाजन स्वचालित रूप से होता है? मैंने हमेशा सोचा है कि यह होना चाहिए input:first।

— सिमशुन

हां, आप इसे या तो लिख सकते हैं। मुझे लगता है कि input:firstइसे लिखने के लिए और अधिक औपचारिक तरीका हो सकता है, हालांकि दूसरे तरीके को पढ़ना आसान लगता है। लेकिन हो सकता है कि मैं सिर्फ :)

— जस्टिन एथियर

मुझे लगता है कि क्योंकि मुझे इसकी आदत है, जब मैं अंतरिक्ष को देखता हूं तो मुझे स्वतः "बाल तत्व" लगता है और यह खुद को डी-कन्फ्यूज करने में एक सेकंड लगता है। लेकिन हे, यह सिर्फ मुझे है। यह अच्छा है कि यह किसी भी तरह से काम करता है।

— सिमशुन

@ अन्याय वास्तव में मुझे इसे काम करने के लिए थोड़ा मोड़ना पड़ा: $(this).parent().siblings('div.bottom').find("input.post").focus();लेकिन .find()चयनकर्ता है जिसे मैं ढूंढ रहा था। दिलचस्प है input :firstऔर न ही input:firstकाम किया।

— रोलिंग स्टोन

दिलचस्प है, शायद क्योंकि इनपुट एक formटैग के भीतर है । वैसे भी, खुशी है कि आप इसे काम करने के लिए जाते हैं!

— जस्टिन एथियर

Answer 2

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

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

Answer 3

जस्टिन का जवाब मेरे काम नहीं आया (क्रोमियम 18, फ़ायरफ़ॉक्स 43.0.1)। jQuery का .focus()दृश्य हाइलाइट करता है, लेकिन टेक्स्ट कर्सर फ़ील्ड में प्रकट नहीं होता है (jquery 3.1.0)।

Https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ से प्रेरित होकर , मैंने इनपुट फ़ील्ड और वॉइला में ऑटोफ़ोकस विशेषता जोड़ी !

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

Comments

मेरे लिए काम किया। सरल संस्करण इस तरह है: $ ('वर्ग इनपुट')। फ़ोकस (); $ ('वर्ग इनपुट')। प्रोप ('ऑटोफोकस');

— अस्तित्व के प्रति