क्या जावास्क्रिप्ट फोकस () फ़ंक्शन का उपयोग करके <div> पर ध्यान केंद्रित करना संभव है?

Question

क्या <div>जावास्क्रिप्ट focus()फ़ंक्शन का उपयोग करना ध्यान केंद्रित करना संभव है ?

मेरे पास एक <div>टैग है

<div id="tries">You have 3 tries left</div>

मैं उपरोक्त <div>प्रयोग पर ध्यान केंद्रित करने की कोशिश कर रहा हूँ :

document.getElementById('tries').focus();

लेकिन यह काम नहीं करता है। क्या कोई कुछ सुझा सकता है ....?

Comments

जब आप इसे 'फोकस' करते हैं तो आप क्या करना चाहते हैं? Divs इनपुट स्वीकार नहीं करते, तो क्या आप बॉर्डर को फ्लैश करना चाहते हैं, या बैकग्राउंड हाइलाइट को फ्लैश करना आदि?

— माइकल शिमिन्स

@ मिचेल, हाँ मुझे चाहिए कि <div> उपयोगकर्ता का ध्यान आकर्षित करने के लिए ...

— ओम द इटरनिटी

कौन से HTML तत्वों

— सिरो सेंटिल्ली 郝海东 i i i 法轮功 '

@MichaelShimmins और कोई भी, <div> तत्व इनपुट को स्वीकार कर सकता है यदि आपके पास सच करने के लिए संतोषप्रद सेट है। (इस कारण मैंने पूछताछ की)

— मितलीवोस

divअगर वे ओवरफ्लो करते हैं और स्क्रॉल बार दिखाते हैं तो @MichaelShimmins इनपुट स्वीकार कर सकता है। जब divस्क्रॉल पट्टी के साथ ध्यान केंद्रित किया जाता है, तो तीर कुंजियाँ उसकी सामग्री (जैसे अन्य तत्वों की सामग्री के बजाय) को स्क्रॉल करेंगी body।

— रोरी ओ'केन

Answer 1

window.location.hash = '#tries';

यह प्रश्न में तत्व को स्क्रॉल करेगा, अनिवार्य रूप से "फ़ोक" इसे संलग्न करेगा।

Comments

@ कैसी चु: इसका काम ठीक है लेकिन फायरफॉक्स में नहीं, क्या आपको कुछ सूझता है?

— हसीब अख्तर

यह कुछ क्रोम संस्करणों में काम नहीं करता है ... हालांकि, @vinoths समाधान करता है

— चार्लीमॉप्स

यह काम करता है लेकिन ... कोणीय के साथ आपको समस्या होगी !!

— कार्लोस वेरिड्स

@CarlosVerdes; क्या एंगुलर का कोई हल है?

— मैक शातिर

'फोकस' सवाल का जवाब नहीं, यह सही जवाब नहीं होना चाहिए। मेरे मामले में, मैं एक 'contentEditable' div पर ध्यान केंद्रित करना चाहता हूं, और आपकी चाल मदद नहीं करती है।

— अरण्डाम्ब्रो

Answer 2

हाँ - यह संभव है। ऐसा करने के लिए, आपको एक टैबइंडेक्स असाइन करना होगा ...

<div tabindex="0">Hello World</div>

0 का एक टैबइंडेक्स "पृष्ठ के प्राकृतिक टैब क्रम में" टैग लगाएगा। एक उच्च संख्या इसे प्राथमिकता का एक विशिष्ट आदेश देगी, जहां 1 पहले, 2 सेकंड और इतने पर होगा।

आप -1 का एक टैब भी दे सकते हैं, जो केवल स्क्रिप्ट द्वारा फोकस-सक्षम करेगा, उपयोगकर्ता नहीं।

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

जाहिर है, यह एक ऐसा तत्व है जिसे आप स्क्रिप्ट के द्वारा ध्यान केंद्रित कर सकते हैं, यह शर्म की बात है कि आप अन्य इनपुट विधि द्वारा ध्यान केंद्रित नहीं कर सकते हैं (विशेषकर यदि कोई उपयोगकर्ता केवल कीबोर्ड या इसी तरह विवश है)। वहाँ भी मानक तत्वों है कि की एक पूरी गुच्छा रहे हैं कर रहे हैं डिफ़ॉल्ट रूप से फ़ोकस करने योग्य और अर्थ जानकारी प्रयोक्ताओं की सहायता करने में पकाया है। इस ज्ञान का बुद्धिमानी से उपयोग करें।

Comments

@ माइकल शिमिन्स, यह तत्व को ध्यान देने योग्य बनाने की अनुमति देता है (गैर-मानक तरीके से!) focus()।

— स्ट्रैजर

@ ऑयलिकल - मुझे पूरा यकीन है कि इसके जवाब की अंतिम पंक्ति में यही कहता है। अगर आपको लगता है कि कोई समस्या है जिसे संपादित करने की आवश्यकता है तो मुझे बताएं।

— फेंटन

यदि यह स्पष्ट नहीं था, तो tabindexएक तत्व को जोड़ने से यह ध्यान देने योग्य हो जाएगा, जो तरीकों focus()और blur()विधियों को सक्षम करता है , और फिर आप इस तरह से एक फोकस को ट्रिगर कर सकते हैं:document.getElementById('tries').focus();

— pilau

हाय @SteveOwen - यह अभी भी फ़ायरफ़ॉक्स v42 में काम करने लगता है। मैंने इस उत्तर के लिए एक स्निपेट जोड़ा है ताकि आप इसे चला सकें और परीक्षण कर सकें।

— फेंटन

@SteveOwen window.location.hash = ...ऐसा करने का तरीका है। फ़ोकस डेंस का मतलब "दृश्य में लाना" नहीं है, इसका मतलब है कि शाब्दिक रूप से उस तत्व पर ध्यान केंद्रित करें।

— फेंटन

Answer 3

document.getElementById('tries').scrollIntoView()काम करता है। यह window.location.hash तब बेहतर होता है जब आपने पोजिशनिंग तय की हो।

Comments

ध्यान दें कि यह समाधान IE, ओपेरा या सफारी में काम नहीं करेगा।

— 15

मैंने अभी क्रोम 65 में यह कोशिश की है और यह काम नहीं करता है। ओवरले डिव दृश्य में स्क्रॉल करता है, लेकिन फोकस अभी भी पृष्ठभूमि div में है। एकमात्र निश्चित-अग्नि-मार्ग, जिसके बारे में मुझे पता है tabindexकि ओवरले डिव में एक टैब्लेबल एलिमेंट ( विशेषता का उपयोग करके ) है और focus()इसके बजाय उस एलिमेंट का उपयोग करना है।

— 20

@ om-the-eternity ने पहले ही कहा कि वह चाहता है कि div उपयोगकर्ता का ध्यान आकर्षित करे, इसलिए उसे वास्तव में ध्यान केंद्रित करने की आवश्यकता नहीं है (यहां तक ​​कि जब वह इसे करने के लिए सही नहीं है तो) div, लेकिन इसे स्क्रीन पर लाना , इसका मतलब यह है कि

— उमर वाज़क्वेज़

यदि मैं क्रोम में ऐसा करता हूं तो यह अभी भी केंद्रित इनपुट क्षेत्र पर वापस स्क्रॉल करता रहता है। खासकर यदि पृष्ठ अभी तक लोड नहीं किया गया है।

— रोजर क्रुएगर

Answer 4

आप tabindex का उपयोग कर सकते हैं

<div tabindex="-1"  id="tries"></div>

टैबिन्डेक्स मूल्य कुछ दिलचस्प व्यवहार के लिए अनुमति दे सकता है।

• यदि "-1" का मान दिया जाता है, तो तत्व को टैब नहीं किया जा सकता है, लेकिन प्रोग्राम को तत्व (element.focus () का उपयोग करके) पर ध्यान दिया जा सकता है।
• यदि 0 का मान दिया जाता है, तो तत्व को कीबोर्ड के माध्यम से केंद्रित किया जा सकता है और दस्तावेज़ के टैबिंग प्रवाह में आता है। 0 से अधिक मान 1 के साथ एक प्राथमिकता स्तर बनाते हैं जो सबसे महत्वपूर्ण है।

Comments

वाह, धन्यवाद शांत चाल। धन्यवाद! मुझे इसका पता नहीं चलता।

— AVProgrammer

जीवन रक्षक, धन्यवाद। ऐज में डिव को फोकस किया जा सकता है लेकिन क्रोम में इस ट्रिक के बिना नहीं। स्वीकृत उत्तर बहुत अच्छा है लेकिन मुझे url में अतिरिक्त भाग नहीं चाहिए।

— काल

क्रोम और फ़ायरफ़ॉक्स के साथ life.Works ठीक बचाने

— Susampath

Answer 5

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Comments

यह क्रोमियम / क्रोम 46 में मेरे लिए काम करता है$('#inner').focus();

— टीएनटी

Answer 6

मैं माइकल शिममिन की तरह कुछ सुझाव देना चाहता था, लेकिन तत्व, या सीएसएस जैसे हार्डकोडिंग के बिना इसे लागू किया जाता है।

मैं केवल add / remove class के लिए jQuery का उपयोग कर रहा हूं, यदि आप jquery का उपयोग नहीं करना चाहते हैं, तो आपको बस add / removeClass के लिए प्रतिस्थापन की आवश्यकता है

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

Answer 7

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Answer 8

सीमा फ्लैश करने के लिए आप यह कर सकते हैं:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

यह 1 सेकंड के लिए सीमा को ठोस लाल बना देगा फिर इसे हटा देगा।