टैब कुंजी के साथ UX में सुधार करना

एप्लिकेशन विकसित करते समय, फ्रंट-एंड विक्रेता शायद ही कभी ध्यान देते हैं कि उपयोगकर्ता ब्राउज़र द्वारा प्रदान किए गए कीबोर्ड फ़ंक्शन का उपयोग कैसे करेगा। मैं अपवाद नहीं हूं, लेकिन एक दिन मुझे "टैब" और "शिफ्ट + टैब" दबाकर यूएक्स और संक्रमण के बारे में एक कार्य दिया गया था।

कार्य का सार पारदर्शी और साफ है: एक इंटरफ़ेस है, जिसका लेआउट नीचे प्रदर्शित किया गया है। वैचारिक रूप से, 1 पेज में 2 अलग-अलग फॉर्म हो सकते हैं और आवश्यकता यह थी कि "टैब्स के साथ चलने पर 1 फॉर्म से दूसरे फॉर्म में न जाएं"।



सब कुछ ठीक होगा अगर ब्राउज़र जानता था कि रूपों में "मूल रूप से" ब्लॉक फोकस कैसे किया जाता है। एक उदाहरण नीचे दिए गए आंकड़े में प्रस्तुत किया गया है, जहां नारंगी "बॉर्डर `ओम" वर्तमान तत्व को चिह्नित करता है, और ग्रे - पिछले एक।



जैसा कि आप देख सकते हैं, "देशी" व्यवहार आवश्यकताओं को पूरा नहीं करता है। तो, चलो इस समस्या को हल करते हैं। समाधान जटिल नहीं है, इसलिए इस पर विचार करें।

यह आदर्श होगा यदि कुछ "द्वार" थे जो "टैब" के साथ अंतिम ("टैब" के साथ) या पहले ("शिफ्ट + टैब") तत्व के साथ "टैबइंडेक्स" या डिफ़ॉल्ट रूप से फोकस का समर्थन करने से "बाहर कूद" को रोकेंगे। इसलिए, सार सरल है: हमारे "गेट्स" छिपे हुए हैं "इनपुट एलिमेंट्स", जो "ऑनफोकस" इवेंट के दौरान एक तर्क के रूप में "ईवेंट" इवेंट को प्राप्त करते हैं और उस एलिमेंट पर ध्यान केंद्रित करते हैं जिसमें से यह आया था। नीचे चित्रण।



पिछले तत्व को "घटना" ऑब्जेक्ट की "संबंधितटार्गेट" संपत्ति का उपयोग करके संभव है। नीचे दिए गए समाधान का दृश्य।



और यहाँ कोड ही है। यह ध्यान देने योग्य है कि कोई "ईएस 6+" सिंटैक्स नहीं है, क्योंकि विभिन्न ब्राउजर के साथ कोड को सपोर्ट करने का विचार विभिन्न "ट्रांसपैरर्स" को जोड़े बिना है जैसे कि बैबेल कोर पर है।

function getGateInput(handleTabOut) { var input = document.createElement("input"); // not visibiliy:hidden or display:none as need to focus on this element var hiddingStyle = "opacity: 0;cursor: none;position: absolute;top: -10px;left: -10px;"; input.setAttribute("style", hiddingStyle); input.addEventListener("focus", handleTabOut); return input; } 

कुछ भी जटिल नहीं है: एक "इनपुट" बनाया जाता है, शैलियों को सेट किया जाता है जो हमारे "गेट्स" को छिपाते हैं। यहां, "प्रदर्शन: कोई नहीं" का उपयोग नहीं किया जाता है, क्योंकि ब्राउज़र ऐसे तत्वों पर "टैब" केंद्रित नहीं करता है। इस व्यवहार के कारण, तत्व को पारदर्शी बनाना और ब्राउज़र विंडो से बाहर ले जाना आवश्यक है।

 function getTabOutHandler(element, GATES) { return function(event) { var relatedTarget = event.relatedTarget || event.fromElement; var target = event.target; var gatesTrapped = target === GATES[0] || target === GATES[1]; if (gatesTrapped && isChild(relatedTarget, element)) { event.preventDefault(); relatedTarget.focus(); } }; } 

पिछले आइटम पर ध्यान केंद्रित करने के लिए, getTabOutHandler का उपयोग करें। यह HOC है । इसका पहला तर्क है हमारा कंटेनर (जिसके चारों ओर हम "गेट" सेट करते हैं), और दूसरा यह "गेट्स" की एक सरणी की अपेक्षा करता है जिसे हमने गेटगेटइनपुट का उपयोग करके बनाया है। यह फ़ंक्शन एक घटना हैंडलर देता है जो ऊपर वर्णित सिद्धांत के अनुसार काम करता है।

कंटेनर में ध्यान केंद्रित करने के लिए, हमें "गेट" को खोलने और बंद करने की आवश्यकता है। हम इसे "टैबइंडेक्स" विशेषता सेट करके करेंगे। (-1 - टैब्स के साथ फोकस न करें, 0 - स्ट्रीम के अनुसार फोकस करें)

 function moveGates(open, GATES) { GATES[0].setAttribute("tabindex", open ? -1 : 0); GATES[1].setAttribute("tabindex", open ? -1 : 0); } 

फाटकों को नियंत्रित करने के लिए, हम एक हैंडलर स्थापित करेंगे जो टैब (कोड 9) को दबाने के लिए "सुनेंगे" और यदि केंद्रित तत्व (सक्रियण) कंटेनर के अंदर है, तो "गेट" को बंद करें, अन्यथा इसे खोलें।

 window.addEventListener("keydown", function(event) { if (event.keyCode === 9) { if (isChild(document.activeElement, element)) { moveGates(false, GATES); } else { moveGates(true, GATES); } } }); 

कुल मिलाकर

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