मैं चाहता हूं कि मेरे टेक्स्ट बॉक्स में यह सुविधा हो कि हर बार जब उपयोगकर्ता एंटर दबाते हैं, तो वह अगले निकटतम तत्व (इनपुट, चेकबॉक्स, बटन, रेडियो, चयन, ए, डीवी) पर ध्यान केंद्रित करेगा जब तक कि वे ध्यान केंद्रित कर सकें। मैं jquery का उपयोग कर ऐसा कैसे कर सकता हूं?jquery का उपयोग कर अगले निकटतम फोकस करने योग्य तत्व खोजें?
वैसे, यह एक वैध तकनीकी प्रश्न है और यह व्यवसाय की आवश्यकता बहुत अच्छी तरह से हो सकता है। मुझे बैक ऑफिस ऐप्स में इस तरह के व्यवहार को काफी परेशान करने के लिए कहा गया है। ऐसे कई मूल ऐप्स हैं जो इस तरह से व्यवहार करते हैं।
मैंने नीचे दिए गए उदाहरण की तरह सामग्री के साथ डीआईवी का उपयोग करके अपना फॉर्म बनाकर इस आवश्यकता को संबोधित किया।
<html>
<head>
<style type="text/css">
div.input { border:1px solid #aaa; width:300px; }
</style>
</head>
<body>
<div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div>
</body>
</html>
आप कर सकते हैं पर कब्जा ENTER के लिए महत्वपूर्ण घटना और अगले भाई JQuery का उपयोग करने पर ध्यान केंद्रित करने के लिए बस की स्थापना की।
मुझे बताएं कि आपको और स्पष्टीकरण की आवश्यकता है या नहीं।
उम्मीद है कि इससे मदद मिलती है। शुभ लाभ।
मैंने पहले ही ऐसा कर लिया है। यहाँ http://jsfiddle.net/R8PhF/3/
$(document).ready(function(){
$('#mytextbox').keyup(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
var tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(this);
tabables.eq(index + 1).focus();
}
});
});
रचनात्मक प्रतिक्रिया और प्रश्न को समझने के लिए धन्यवाद। +1 –
यह कस्टम टैब इंडेक्स को संभाल नहीं करता है, मुझे नहीं लगता। तो यह एक निश्चित उपयोग मामले के लिए काम कर सकता है, लेकिन उनमें से सभी नहीं। – Scott
यह फोकस करने योग्य के लिए भी एक अवैध चयनकर्ता है। इसे tabIndex = -1 को बाहर करने की आवश्यकता है, इसे उचित तत्वों और बाधाओं तक सीमित करें और tabIndex = 0 (जैसे divs जो पारंपरिक रूप से केंद्रित नहीं हैं) के साथ कुछ भी शामिल करें। यह वही नहीं है जो आप चाहते हैं, लेकिन यह एक बेहतर शुरुआत है। चयनकर्ता एकमात्र चीज है जिसे इसे काम करने के लिए बदलने की जरूरत है। 'फोकस करने योग्य' के लिए एक jquery ui चयनकर्ता भी उपयोग किया जा सकता है। (फिडल टूटा हुआ दिखाता है, इसे काम करने के लिए फ़िल्टर अपडेट करें।) Http://jsfiddle.net/b45rw/ – Scott
एल्गोरिथ्म के लिहाज से मेरी समाधान का प्रयास करें:
सभी तत्वों को ध्यान केंद्रित किया जा सकता है की एक सूची रखें। इसके लिए डीओएम पर भरोसा करें। आप सूची को स्वयं रखना चाहिए। यदि आप नहीं जानते कि पेज पर कौन से तत्व हैं, तो आप पहले ही कुछ गलत कर चुके हैं। डीओएम देखेंडेटास्टोर नहीं, तदनुसार इसका इलाज करें। JQuery का उपयोग करने वाले कई नौसिखिया इस गलती को करते हैं, और jQuery के साथ यह गलती करना आसान है।
पृष्ठ पर सभी ध्यान देने योग्य तत्वों की स्थिति पाएं। 1 के अनुसार 1. सबसे अच्छा तरीका के लिए सबसे अच्छा तरीका है डीओएम को देखे बिना भी सभी तत्वों की सापेक्ष स्थिति। JQuery के साथ आप .dimension() का उपयोग कर सकते हैं। इस सूची को अद्यतित रखने के लिए आपको कुछ बहीखाता करनी पड़ सकती है (यानी जब आपका डेटा/दृश्य बदलता है)।
वर्तमान केंद्रित तत्व की स्थिति पाएं।
उपयोग कुछ एल्गोरिथ्म अन्य स्थानों की अपनी सूची में यह तुलना करने के लिए और प्राप्त निकटतम (इस के लिए बहुत कुछ मतलब हो सकता है, तो आप शायद तुम क्या चाहते पता है)।
फिर तत्व पर ध्यान केंद्रित करें।
यहां कई विकल्प हैं जो आप यहां कर सकते हैं, कुछ प्रदर्शन पर निर्भर करते हैं अन्य बातचीत और इंटरफ़ेस डिज़ाइन पर निर्भर करते हैं।
+1 डीओएम को डेटास्टोर होने पर विचार नहीं करने के लिए +1। – Tvaroh
-1 यह सुझाव देने के लिए कि किसी ऑब्जेक्ट के रूप में दस्तावेज़ का वर्णन करने वाले मॉडल के लिए एक प्रोग्राम प्रोग्रामिंग इंटरफ़ेस के रूप में DOM API का उपयोग करना किसी भी तरह से विरोधी-पैटर्न है। ब्राउजर व्यवहार ओपी निर्धारित करने की तलाश में है कुछ ऐसा है जो ब्राउज़र स्वयं डोम का उपयोग करने का अनुमान लगाता है। न केवल तर्क और त्रुटि और मानव अवलोकन और रखरखाव द्वारा ऐसा करने के लिए लेखक को एक ही तर्क का प्रयास करने और उपयोग करने के लिए पूरी तरह से उचित है, यह मूल रूप से एंटी-प्रोग्रामिंग दृष्टिकोण है। – Barney
@ बरनी जो मैं सुझाव दे रहा हूं वह नहीं है। मैंने इसे बहुत समय पहले पोस्ट किया था, इसलिए मुझे नहीं पता कि मेरे सटीक विचार थे। '$ (" * [Tabindex! = '-1'] जैसे विवरण: दृश्यमान "); 'डीओएम से पूछताछ करें और कौन सा तत्व _next_ प्राप्त करने का प्रयास करें। लेकिन, जब आप इनपुट तत्वों को प्रतिपादित कर रहे हैं तो आप पहले ही जानते हैं कि आप उन्हें किस क्रम में प्रस्तुत कर रहे हैं ताकि आपको DOM से पूछताछ करने की आवश्यकता न हो। जब तक तर्क सरल है _jQuery_ दृष्टिकोण काम करता है लेकिन जैसे ही आप जटिलता का थोड़ा सा परिचय देते हैं (उदा: एक फ़ील्ड छोड़ें, बटन छोड़ें, अंतिम फ़ील्ड सबमिट करना चाहिए) आप अजीब कोड के साथ समाप्त होने जा रहे हैं। – Halcyon
आपने क्या प्रयास किया है? बीटीडब्लू, कृपया 'निकटतम' को परिभाषित करें। ओह, एक और बात, उपयोगकर्ताओं को सिखाएं और शायद स्वयं को टैब कुंजी का उपयोग करने के लिए भी। – gdoron
ब्राउज़र पहले से ही टैब प्रेस पर ऐसा करते हैं। दर्ज करें का एक अलग अर्थ भी है ... आप इसे क्यों हटाना चाहते हैं? –
अगला निकटतम एक नियंत्रण है जिसे आप अगले इनपुट करना चाहते हैं, पिछले एक – sadcat