:focusऔर :activeछद्म वर्गों के बीच अंतर क्या है ?
:focusऔर :activeछद्म वर्गों के बीच अंतर क्या है ?
जवाबों:
:focusऔर :activeदो अलग-अलग राज्य हैं।
:focus जब तत्व वर्तमान में इनपुट प्राप्त करने के लिए चुना जाता है और राज्य का प्रतिनिधित्व करता है :active उस स्थिति का प्रतिनिधित्व करता है जब उपयोगकर्ता द्वारा वर्तमान में तत्व सक्रिय किया जा रहा है।उदाहरण के लिए मान लें कि हमारे पास ए <button>। <button>किसी भी राज्य के साथ शुरू नहीं होगा। यह अभी मौजूद है। यदि हम Tab"फ़ोकस" देने के लिए उपयोग करते हैं <button>, तो यह अब अपने :focusराज्य में प्रवेश करता है। यदि आप तब क्लिक करते हैं (या दबाते हैं space), तो आप बटन को दर्ज करते हैं (:active ) स्थिति ।
उस नोट पर, जब आप किसी तत्व पर क्लिक करते हैं, तो आप उस पर ध्यान केंद्रित करते हैं, जो भ्रम पैदा करता है :focusऔर :activeजो समान हैं। वे एक जैसे नहीं हैं। जब क्लिक किया बटन :focus:activeराज्य में है।
एक उदाहरण:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>संपादित करें: jsfiddle
:activeराज्य में प्रवेश होता है
focusऔर activeघोषणा का क्रम मायने नहीं रखता है। यह तभी मायने रखता है जब वे एक-दूसरे का खंडन करते हैं जैसे ( color:redऔर color:blueफिर अंतिम एक जीत)।
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited linkस्रोत: सीएसएस छद्म कक्षाएं
visitedलिंक को हॉवर या क्लिक करने पर शैली नहीं बदलेगी क्योंकि उनकी "विज़िटनेस" अन्य छद्म वर्गों को ओवरराइड कर देगी। LVHFA वह आदेश है जो अधिकांश लोग अधिकांश मामलों में उपयोग करना चाहते हैं। यकीन नहीं होता कि आपने क्यों शामिल किया lang...
चार मामले हैं।
:focus(सक्रिय के बिना)।:active:active:focusउदाहरण:
<div>
I cannot be focused.
</div>
<div tabindex="0">
I am focusable.
</div>div:focus {
background: green;
}
div:active {
color: orange;
}
div:focus:active {
font-weight: bold;
}जब पृष्ठ लोड होता है तो दोनों स्थिति में होते हैं। 1. जब आप टैब दबाते हैं तो आप दूसरी div पर ध्यान केंद्रित करेंगे और इसे प्रदर्शित करेंगे मामले 2. जब आप पहले div पर क्लिक करते हैं तो आपको मामला दिखाई देता है। 3. जब आप दूसरा div क्लिक करते हैं, तो आप केस 4 देखते हैं ।
एक तत्व ध्यान देने योग्य है या नहीं यह एक और सवाल है । अधिकांश डिफ़ॉल्ट रूप से नहीं हैं। लेकिन, यह मान लेना सुरक्षित है <a>, <input>, <textarea>डिफ़ॉल्ट रूप से फ़ोकस करने योग्य हैं।
:activeलेकिन नहीं :focus। यह एक बात है कि मैं इस बारे में उलझन में था कि अन्य उत्तरों को संबोधित नहीं किया गया था।
: फ़ोकस तब होता है जब कोई तत्व इनपुट को स्वीकार करने में सक्षम होता है - इनपुट बॉक्स में कर्सर या लिंक जिसे टैब किया गया है।
: सक्रिय तब होता है जब उपयोगकर्ता द्वारा एक तत्व सक्रिय किया जा रहा है - जब उपयोगकर्ता माउस बटन दबाता है और फिर इसे जारी करता है।
सक्रिय उस समय होता है जब उपयोगकर्ता उस बिंदु को सक्रिय कर रहा होता है (जैसे माउस क्लिक करना, अगर हम फ़ील्ड-से-फ़ील्ड से टैब का उपयोग करते हैं, तो सक्रिय शैली से कोई भी नहीं है। शायद अधिक समय की आवश्यकता है, बस उस बिंदु पर क्लिक करने की कोशिश करें), इसके बाद फोकस किया जाता है। बिंदु सक्रिय है। इसे इस्तेमाल करे :
<style type="text/css">
input { font-weight: normal; color: black; }
input:focus { color: green; outline: 1px solid green; }
input:active { color: red; outline: 1px solid red; }
</style>
<input type="text"/>
<input type="text"/>फोकस केवल कीबोर्ड इनपुट द्वारा दिया जा सकता है, लेकिन एक एलीमेंट को माउस या कीबोर्ड दोनों द्वारा सक्रिय किया जा सकता है।
यदि कोई उपयोग करेगा: एक लिंक पर ध्यान केंद्रित करें, तो स्टाइल नियम केवल कीबोर्ड पर एक बोटन को दबाने के साथ लागू होगा।
:focusउस तरह काम नहीं करता है। वर्तमान में मैं जिस textarea टाइप कर रहा हूं, उसमें फोकस है क्योंकि मैंने एक बटन क्लिक किया है। यह बाहर से क्लिक करके और इसे फिर से फोकस में खो सकता है और पुनर्स्थापित कर सकता है। केवल एक सेकंड में, मैं उस पर क्लिक करके दाईं ओर Add टिप्पणी बटन पर ध्यान देने जा रहा हूं। बिना कीबोर्ड इनपुट के यह सब ध्यान केंद्रित करता है।
"फ़ोकस" का उपयोग करने से कीबोर्ड उपयोगकर्ताओं को वही प्रभाव मिलेगा जो माउस उपयोगकर्ताओं को माउस के साथ मंडराने पर मिलता है। "Internet Explorer में समान प्रभाव प्राप्त करने के लिए सक्रिय" आवश्यक है।
वास्तविकता यह है कि ये राज्य उतने काम नहीं करते जितने कि सभी उपयोगकर्ताओं के लिए होने चाहिए। सभी तीन चयनकर्ताओं का उपयोग नहीं करने से कई कीबोर्ड-केवल उपयोगकर्ताओं के लिए पहुँच क्षमता समस्याएँ पैदा होती हैं जो माउस का उपयोग करने में शारीरिक रूप से असमर्थ हैं। मैं आपको #nomouse Challenge (nomouse dot org) लेने के लिए आमंत्रित करता हूं।
document.activeElementसंपत्ति का उपयोग करके केंद्रित तत्व प्राप्त कर सकते हैं, हालांकि इसे एक कोशिश की पकड़ में होना चाहिए क्योंकि IE8 एक अपवाद फेंक सकता है। और ध्यान रखें कि ब्राउज़र के पुराने संस्करण इलाज कर सकते हैं: सक्रिय और: अलग तरह से ध्यान केंद्रित करते हैं।function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }