टेक्स्ट बॉक्स में TAB कुंजी कैप्चर करना [बंद]

100

यह प्रश्न भविष्य के किसी भी आगंतुक की मदद करने की संभावना नहीं है; यह केवल एक छोटे से भौगोलिक क्षेत्र के लिए प्रासंगिक है, समय में एक विशिष्ट क्षण, या एक असाधारण रूप से संकीर्ण स्थिति जो आमतौर पर इंटरनेट के दुनिया भर के दर्शकों के लिए लागू नहीं होती है। इस प्रश्न को अधिक व्यापक रूप से लागू करने में सहायता के लिए, सहायता केंद्र पर जाएँ ।

9 साल पहले बंद हुआ ।

मैं Tabचार स्थानों पर टैब करने के लिए एक टेक्स्ट बॉक्स के भीतर कुंजी का उपयोग करने में सक्षम होना चाहूंगा । जिस तरह से यह अब है, टैब कुंजी मेरे कर्सर को अगले इनपुट पर कूदती है।

क्या कुछ जावास्क्रिप्ट है जो टैब की टैब को UI पर बुलबुले बनाने से पहले कैप्चर करेगा?

मैं समझता हूं कि कुछ ब्राउज़र (अर्थात फ़ायरफ़ॉक्स) इसकी अनुमति नहीं दे सकते हैं। कैसे के बारे में एक कस्टम कुंजी कॉम्बो की तरह Shift+ Tab, या Ctrl+ Q?

javascript user-interface

— Seibar
स्रोत

ध्यान केंद्रित खिड़की के लिए जाँच करने के लिए मत भूलना, और इसे सामान्य रूप से बबल दें यदि आप संपादक टेक्स्टारिया में नहीं हैं।

— फ्लाईसवाट

इस पोस्ट को मॉडरेटर-फ़्लैग किया गया, जैसा कि "meta.stackoverflow.com के अंतर्गत आता है", लेकिन यह दो साल से अधिक पुराना है, इसलिए मैं इसे माइग्रेट नहीं कर रहा हूं।

— रॉबर्ट हार्वे

108

यहां तक कि अगर आप keydown/ keyupईवेंट को कैप्चर करते हैं, तो वे एकमात्र ईवेंट हैं जो टैब की कुंजी फायर करती है, फिर भी आपको डिफ़ॉल्ट एक्शन को रोकने के लिए किसी तरह की आवश्यकता होती है, टैब क्रम में अगले आइटम पर जाने से।

फ़ायरफ़ॉक्स में आप preventDefault()अपने ईवेंट हैंडलर को दिए गए ईवेंट ऑब्जेक्ट पर विधि को कॉल कर सकते हैं । IE में, आपको ईवेंट हैंडल से गलत लौटना होगा। JQuery लाइब्रेरी preventDefaultअपने इवेंट ऑब्जेक्ट पर एक विधि प्रदान करता है जो IE और FF में काम करता है।

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

— ScottKoon
स्रोत

1

मैंने अभी लाइन 4 को "if (el.attachEvent)" से "if (myInput.attachEvent)"

— Fenton

ध्यान दें कि यह कोड TAB को अंत में जोड़ता है। यह ज्यादातर अवसरों में असुविधाजनक है।

— अलेक्जेंडर पालमार्चुक

@SteveFenton रिक्त स्थान को फिर से निकालने का एक सरल तरीका है keycode 8?

— डेकार्ट

18

मैं नहीं बल्कि टैब इंडेंटेशन फॉर्म आइटम के बीच टैबिंग को तोड़ने से काम नहीं करना चाहिए।

यदि आप मार्कडाउन बॉक्स में कोड डालना चाहते हैं, तो Ctrl+ K(या मैक पर toK) का उपयोग करें।

वास्तव में कार्रवाई को रोकने के संदर्भ में, jQuery (जो स्टैक ओवरफ्लो का उपयोग करता है) जब आप किसी ईवेंट कॉलबैक से झूठे वापस आते हैं, तो बबलिंग से एक घटना को रोक देगा। यह कई ब्राउज़रों के साथ काम करने के लिए जीवन को आसान बनाता है।

— लॉरेन
स्रोत

13

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

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

— टॉम
स्रोत

6

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

एक शॉर्टकट कुंजी उपयोगी हो सकती है, खासकर बड़े कोड ब्लॉक और नेस्टिंग के साथ। शिफ्ट-टीएबी एक बुरा विकल्प है क्योंकि यह मुझे सामान्य रूप से एक फॉर्म में पिछले क्षेत्र में ले जाता है। शायद शॉर्टकट कुंजी के साथ कोड-टीएबी सम्मिलित करने के लिए डब्ल्यूएमडी संपादक पर एक नया बटन संभव होगा?

— वैली लॉलेस
स्रोत

1

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

— चार्ल्स 14

@ पहुँच क्षमता के बारे में बहुत अच्छी बात बताती है।

— वैली लॉलेस

4

स्कॉटकून द्वारा दिए गए सर्वश्रेष्ठ उत्तर में एक समस्या है

यहाँ है

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

होना चाहिए

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

इस कारण यह IE में काम नहीं किया। उम्मीद है कि ScottKoon कोड को अपडेट करेगा

— chintan123
स्रोत

3

क्रोम में मैक पर, ऑल्ट-टैब एक <textarea>क्षेत्र में एक टैब वर्ण सम्मिलित करता है ।

यहां एक है: । वी!

— पॉल डी। वेटे
स्रोत