$ .focus () काम नहीं कर रहा है

Question

JQuery के के अंतिम उदाहरण focus()प्रलेखन राज्यों

$('#id').focus()

इनपुट को केंद्रित (सक्रिय) बनाना चाहिए। मैं यह काम पाने के लिए प्रतीत नहीं कर सकता।

यहां तक ​​कि इस साइट पर कंसोल में, मैं इसे खोज बॉक्स के लिए प्रयास कर रहा हूं

$('input[name="q"]').focus()

और मुझे कुछ नहीं मिल रहा है। कोई विचार?

Comments

क्या आप हमें अपना कोड दिखा सकते हैं?

— आदिल

हमें और जानना होगा, क्योंकि यह मेरे लिए ठीक काम करता है: jsfiddle.net/G7hwR/1 सिर्फ सही पैनल में कहीं भी क्लिक करें और यह ध्यान केंद्रित करता है ...

— Rob G

इस पृष्ठ पर काम नहीं करना चाहिए, यद्यपि? स्निपेट मैंने प्रदान किया?

— सैम सेलिकॉफ

यह उस पर निर्भर करता है जो इसमें निहित है; अगर यह किसी भी चीज के अंदर नहीं है, तो यह संभव है कि पेज को रेंडर करने से पहले भी चलाया जाए ...

— Rob G

खोज से यहां आने वालों के लिए: ब्राउज़र का डेवलपर टूल बनाया गया हो सकता है कि यह focus()फ़ंक्शनलिटी के साथ हस्तक्षेप कर सके । अधिक जानकारी

— anexl

Answer 1

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

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

अपने दूसरे के लिए, एक चीज जिसने मुझे अतीत में परेशान किया है वह घटनाओं का क्रम है। आप उस तत्व पर फ़ोकस () नहीं कह सकते हैं जो DOM से संलग्न नहीं है। क्या वह तत्व जिसे आप पहले से ही ध्यान केंद्रित करने की कोशिश कर रहे हैं वह डोम से जुड़ा हुआ है?

Comments

महान! क्या इससे आपकी दोनों समस्याओं में मदद मिली? यदि हां, तो क्या आप इसे सही उत्तर के रूप में चिह्नित कर सकते हैं? मैं इसकी बहुत सराहना करूंगा: D

— जस्टिन वारकेंटिन

डेवलपर उपकरण का उपयोग न करें जब केवल $ ('इनपुट [नाम = "q"]') का उपयोग करें। फ़ोकस करें (), या काम नहीं

— अमिताभ

वाह, मैं महीनों से इसके साथ संघर्ष कर रहा था, मैंने केवल यह देखा कि यह डेवलपर कंसोल के खुले होने के कारण होता है। मेरा हमेशा है। धन्यवाद!

— एलेक्स टरपिन

+1 के लिए "आप DOM पर अटैच नहीं किए गए तत्व पर फोकस () नहीं कह सकते।" इसके अलावा, ऐसा लगता है कि आप इसे छिपे हुए तत्वों पर नहीं कह सकते।

— tandrewnichols

setTimeoutसंचालन समस्याओं के समाधान के लिए उपयोग करने से इसे बनाए रखने के लिए पेटीएम में भारी दर्द होता है। यदि कोई बग दिखाता है तो डीबग करना वास्तव में कठिन है। जहाँ भी आप तत्व को DOM में सम्मिलित कर रहे हैं, उसे .focus()वहाँ कॉल करना चाहिए ।

— केविन बील

Answer 2

नेट पर कहीं और एक समाधान मिला ...

$('#id').focus();

काम नहीं किया।

$('#id').get(0).focus();

काम किया।

Comments

मैंने इस समाधान को केवल इसलिए उकेरा क्योंकि मेरे लिए यह तब काम आया जब इस पृष्ठ पर अधिक लोकप्रिय समाधान नहीं था। ;-)

— 19

दूसरा विकल्प सिर्फ डोम तत्व को हथियाने और नियमित संस्करण के बजाय नियमित जावास्क्रिप्ट संस्करण का उपयोग करता प्रतीत होता है।

— danielson317

क्या ऐसा हो सकता है कि आपके पेज पर आईडी "आईडी" के साथ कई तत्व हों? इस मामले में DOM नहीं टूटेगा लेकिन आप कई तत्वों पर ध्यान केंद्रित नहीं कर सकते

— DerpyNerd

मैंने पाया कि मुझे 0 की देरी के साथ window.setTimeout के साथ ऐसा करना था, और फिर सब ठीक है। धन्यवाद। बाकी सब कुछ मैंने बूटस्ट्रैप मोडल में विफल होने की कोशिश की।

— वेड हैटलर

Answer 3

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

इस मामले का सरल तथ्य यह है कि आप किसी ऐसे तत्व पर ध्यान केंद्रित नहीं कर सकते हैं जो अभी तक दिखाई नहीं दे रहा है । यदि आप इस समस्या में भाग लेते हैं, तो सुनिश्चित करें कि लक्ष्य वास्तव में दिखाई दे रहा है जब ध्यान केंद्रित करने का प्रयास किया गया है। अपने मामले में मैं इन पंक्तियों के साथ कुछ कर रहा था

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

यह काम नहीं किया। मुझे केवल एहसास हुआ कि जब मैं $ ('# एलीमिड') निष्पादित कर रहा था, तब कंसोल से फोकस किया गया था । अंतर - लक्ष्य से ऊपर मेरे कोड में कोई निश्चितता नहीं है कि लक्ष्य पूरा हो जाएगा क्योंकि एनीमेशन पूरा नहीं हो सकता है । और वहाँ सुराग निहित है

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

उम्मीद के मुताबिक काम करता है। मैं भी शुरू में एक setTimeoutसमाधान में डाल दिया था और यह भी काम किया। हालांकि, एक मनमाने ढंग से चुना गया टाइमआउट जल्द या बाद में समाधान को तोड़ने के लिए बाध्य है, यह इस बात पर निर्भर करता है कि मेजबान डिवाइस धीरे-धीरे कैसे सुनिश्चित करता है कि लक्ष्य तत्व दिखाई दे रहा है।

Comments

मेरे लिए प्रासंगिक संकेत "यह सुनिश्चित करना था कि लक्ष्य वास्तव में दिखाई दे रहा है"। सशर्त रूप से प्रदान किए गए तत्वों पर ध्यान केंद्रित करने की कोशिश करते समय यह प्रासंगिक हो जाता है।

— चार्ली कार्वर

या जब ध्यान केंद्रित करने का तत्व है visibility:hidden- यह केंद्रित नहीं होगा।

— बकराल

`आप एक तत्व पर ध्यान केंद्रित नहीं कर सकते हैं जो अभी तक दिखाई नहीं दे रहा है` - मैं तुमसे प्यार करता हूँ। केवल एक 100 मी टाइमआउट जोड़कर मैं अपने छिपे हुए खोज बॉक्स पर ध्यान केंद्रित कर सकता हूं। धन्यवाद!

— लुबरे

टाइमआउट से सावधान रहें। आपके विकास मशीन पर जो काम करता है वह दूसरे पर अच्छी तरह से काम नहीं कर सकता है।

— DroidOS

Answer 4

यदि आप बूटस्ट्रैप + मोडल का उपयोग करते हैं, तो यह मेरे लिए काम करता है:

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

Answer 5

बस अगर कोई और इस सवाल पर ठोकर खाता है और मेरे पास वही स्थिति थी - मैं किसी अन्य तत्व पर क्लिक करने के बाद फोकस सेट करने की कोशिश कर रहा था, फिर भी ध्यान काम में नहीं आया। यह पता चला है कि मैं सिर्फ एक की जरूरत है e.preventDefault();- यहाँ एक उदाहरण है:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

इससे मदद मिली:

यदि आप किसी mousedown ईवेंट हैंडलर से HTMLElement.focus () कहते हैं, तो आपको HTMLElement को छोड़ने से फ़ोकस रखने के लिए event.preventDefault () कॉल करना होगा। स्रोत: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Comments

केवल एक ही काम करता है! ट्रिगर एक पॉपअप डिव है, डिव को छुपाता है और टेक्स्ट बॉक्स में कुछ मान डालते हैं (ध्यान केंद्रित करने की आवश्यकता नहीं है)। बिना किसी

— रोक

Answer 6

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

Comments

मैं भी! और टाइमआउट की लंबाई ने वास्तव में एक अंतर बना दिया। बेवकूफ IE।

— बाज़ी 22

लेकिन यह मोबाइल उपकरणों पर काम नहीं कर रहा है। मोबाइल ब्राउज़र ज्यादातर मामलों में सब कुछ अनदेखा कर रहे हैं जो सेटटाइमआउट के अंदर है

— कोसमोनाफ्ट

अंगूठे के एक नियम के रूप में, उपयोग setTimeoutकरना एक बुरा समाधान है। आप उपयोगकर्ता की मशीन पर निष्पादन समय की गारंटी नहीं दे सकते हैं, इसलिए समय-निर्भर सामान बेहद नाजुक है।

— नाथन

Answer 7

मुझे भी यह समस्या थी। मेरे मामले में काम करने वाला समाधान HTML तत्व पर टैबइंडेक्स संपत्ति का उपयोग कर रहा था।

मैं ng-repeatएक सूची के अंदर कुछ झूठे तत्वों के लिए उपयोग कर रहा था और मैं .focus () का उपयोग करके पहले ली पर ध्यान केंद्रित करने में सक्षम नहीं था, इसलिए मैंने लूप के दौरान प्रत्येक ली में टैबइंडेक्स विशेषता को जोड़ा।

तो अब <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

वह +1 इंडेक्स से शुरू होता है। यह भी सुनिश्चित करें कि तत्व .focus () फ़ंक्शन को कॉल करने से पहले DOM में मौजूद है

आशा है कि ये आपकी मदद करेगा।

Answer 8

काम नहीं करने की समस्या वाले लोगों के लिए क्योंकि आपने "$ (तत्व) .show ()" का उपयोग किया था। मैंने इसे अगले तरीके से हल किया:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

तो आपको टाइमर की आवश्यकता नहीं है, यह शो विधि के पूरा होने के बाद निष्पादित करेगा।

Comments

: यह किसी भी अन्य संक्रमण पर लागू होता है slideDown(), fadeIn()आदि

— अलवारो गोंजालेज

Answer 9

फोकस से पहले एक देरी जोड़ें ()। 200 एमएस पर्याप्त है

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Answer 10

अभी यह मुद्दा फिर से था, और इसे मानो या न मानो, मुझे बस इतना करना था कि डेवलपर टूल बंद करना था। जाहिरा तौर पर कंसोल टैब में पेज कंटेंट पर फोकस प्राथमिकता है।

Answer 11

सुनिश्चित करें कि तत्व और उसके माता-पिता दिखाई दे रहे हैं। आप छिपे हुए तत्वों पर ध्यान केंद्रित नहीं कर सकते

Answer 12

अतिरिक्त समाधान एक ही मुद्दा था जहाँ फोकस () काम करने के लिए नहीं लगता था, लेकिन अंततः यह पता चला कि जो आवश्यक था वह सही स्थिति पर स्क्रॉल कर रहा था:

• https://stackoverflow.com/a/43342974/1335717

Answer 13

मेरे मामले के लिए मुझे एक टैब इंडेक्स निर्दिष्ट करना था ( -1यदि स्क्रिप्ट के माध्यम से केवल ध्यान देने योग्य)

<div tabindex='-1'>
<!-- ... -->
</div>