2008-08-06 15 views
74

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

क्या कोई जावास्क्रिप्ट है जो यूआई पर बुलबुले से पहले टेक्स्ट बॉक्स में टैब कुंजी को कैप्चर करेगा?

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

+0

अपडेट करेगा इस पोस्ट को मॉडरेटर-फ्लैग किया गया है "मेटा.स्टैकओवरफ्लो डॉट कॉम पर है," लेकिन यह दो साल से अधिक पुराना है, इसलिए मैं इसे माइग्रेट नहीं कर रहा हूं। –

+0

फोकस विंडो की जांच करना न भूलें, और यदि आप संपादक टेक्स्टरेरा में नहीं हैं तो इसे सामान्य रूप से बबल करें। – FlySwat

उत्तर

83

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

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

<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> 
+1

मैंने "if (el.attachEvent)" से "if (myInput.attachEvent)" – Fenton

+0

से लाइन 4 को ठीक किया है, इस कोड पर ध्यान दें कि केवल अंत में टैब शामिल है। ज्यादातर अवसरों में यह असुविधाजनक है। –

+0

@SteveFenton क्या 'कुंजीकोड' '8' के साथ रिक्त स्थान को फिर से निकालने का एक आसान तरीका है? – yckart

9

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

document.onkeydown = TabExample; 

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

मैं नहीं बल्कि टैब खरोज प्रपत्र आइटम के बीच टैब को तोड़ने से काम नहीं होता।

आप Markdown बॉक्स में कोड में डालने के लिए इंडेंट करने के लिए चाहते हैं, Ctrl +कश्मीर का उपयोग (या ⌘K Mac पर)।

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

4

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

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

+0

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

+0

@ पहुंचता प्रभावों के बारे में बहुत अच्छी बात है। –

1

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

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

3

वहाँ ScottKoon

यहाँ

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

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

यह IE में काम नहीं किया के कारण होना चाहिए

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

है। उम्मीद है कि स्कॉटकून कोड

संबंधित मुद्दे