आप जावास्क्रिप्ट में फ़ोकस कैसे साफ़ करते हैं?


159

मुझे पता है कि यह कठिन नहीं होना चाहिए, लेकिन मुझे Google पर इसका जवाब नहीं मिला।

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

क्या ऐसा करने का कोई अच्छा तरीका है?


स्पष्ट फोकस का क्या अर्थ है? - क्या यह धब्बा के समान है?
प्लॉडर

3
मैं इसे बनाना चाहता हूं ताकि ब्राउज़र में किसी भी तत्व पर ध्यान केंद्रित न किया जाए।
एंड्रेस

जवाबों:


170

उत्तर: document.activeElement

आप जो चाहते हैं, वह करें document.activeElement.blur()

यदि आपको फ़ायरफ़ॉक्स 2 का समर्थन करने की आवश्यकता है, तो आप इसका उपयोग भी कर सकते हैं:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

8
यदि फ़ायरफ़ॉक्स 2, 0.66% ब्राउज़र शेयर के साथ, एक डील ब्रेकर है ... मेरे पास एक फिक्स है, जो मेरे संपादित उत्तर में है।
JPS

21
2013 में, फ़ायरफ़ॉक्स 2 का ब्राउज़र शेयर 0.66% से काफी कम है, और document.activeElement.blur()इस प्रभाव को प्राप्त करने के लिए सरल सबसे अच्छा तरीका है।
21

88

.focus()और फिर .blur()आपके पेज पर कुछ और मनमाना। चूंकि केवल एक तत्व पर ध्यान केंद्रित किया जा सकता है, इसे उस तत्व में स्थानांतरित किया जाता है और फिर हटा दिया जाता है।


क्या एक अदृश्य तत्व बनाने का एक तरीका है जिसमें ध्यान केंद्रित किया गया है?
एंड्रेस

1
मैं ऐसा करने के लिए सबसे अच्छा तरीका पर एक विशेषज्ञ नहीं हूँ; लेकिन आप निश्चित रूप से इसे ऑफ-स्क्रीन या overflow: clipस्टाइल वाले तत्व की सीमा के बाहर रख सकते हैं । लेकिन आप पहले से ही पृष्ठ पर मौजूद फ़ील्ड का उपयोग कर सकते हैं। या सिर्फ एक उद्देश्य के लिए बनाएं और इसे फिर से निकालें।
केविन रीड

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

5
यह उत्तर तारीख से बाहर है और वर्ष 2017 में लागू नहीं होता है। इसके बजाय ActiveElement का उपयोग करें, जैसा कि stackoverflow.com/a/2520670/39808 में
पॉल फिशर

यह अभी भी काम करता है, बस लंबे समय तक चलता है और फोकस को स्थानांतरित करता है (जो TAB नेविगेशन में हस्तक्षेप कर सकता है) इसके अलावा यह तुरंत स्पष्ट नहीं है कि "कुछ और मनमाना" होना चाहिए।
user202729

49
document.activeElement.blur();

IE9 पर गलत काम करता है - यदि सक्रिय तत्व दस्तावेज़ निकाय है तो यह संपूर्ण ब्राउज़र विंडो को धुंधला करता है। इस मामले की जाँच के लिए बेहतर:

if (document.activeElement != document.body) document.activeElement.blur();

यह सच है, लेकिन आज लगभग कोई भी IE9 का उपयोग नहीं करता है।
डोनाल्ड डक

18

टाइपस्क्रिप्ट का उपयोग करते समय यहां दिए गए उत्तरों में से कोई भी पूरी तरह से सही नहीं है, क्योंकि आप उस प्रकार के तत्व को नहीं जान सकते हैं जो चयनित है।

इसलिए इसे प्राथमिकता दी जाएगी:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

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


6
यह देखना मजेदार है कि मैंने 2010 में वापस पूछे गए एक प्रश्न का उत्तर कैसे विकसित किया है।
एंड्रेस


0

आप window.focus () कह सकते हैं;

लेकिन ध्यान केंद्रित करना या खोना पृष्ठ के चारों ओर प्राप्त करने के लिए टैब कुंजी का उपयोग करके किसी के साथ हस्तक्षेप करने के लिए बाध्य है।

आप कुंजी 13 के लिए सुन सकते हैं, और टैब कुंजी दबाए जाने पर प्रभाव को छोड़ सकते हैं।


-3

JQuery के साथ इसकी बस: $(this).blur();


2
यह एक पुराना उत्तर है इसलिए आप अब तक जान सकते हैं, लेकिन दो कारण हैं जो यह उत्तर लागू नहीं होते हैं। 1. यह मानता है कि ओपी jquery का उपयोग कर रहा था, 2. thisकेंद्रित तत्व होने की आवश्यकता है, जबकि प्रश्न स्पष्ट रूप से बताता है कि ओपी समय से पहले केंद्रित तत्व को नहीं जानता है।
ब्रैंडन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.