जावास्क्रिप्ट

Question

का उपयोग कर एक टैब कीप्रेस को सिमुलेट करना मैं ब्राउज़र कार्य करना चाहता हूं जैसे कि उपयोगकर्ता ने कुछ क्लिक करने पर टैब कुंजी दबाया था।

var event = document.createEvent('KeyboardEvent'); 
event.initKeyEvent("keypress", true, true, null, false, false, false, false, 9, 0); 
this.input.focus()[0].dispatchEvent(event); 

और jQuery:

this.input.focus().trigger({ type : 'keypress', which : 9 }); 

... जो मैं here से ले लिया क्लिक हैंडलर में मैं निम्नलिखित दृष्टिकोण की कोशिश की है।

पहला दृष्टिकोण सबसे अच्छा शर्त प्रतीत होता है, लेकिन यह काफी काम नहीं करता है। यदि मैं पिछले दो पैरामीटर को 98, 98 में बदलता हूं, तो वास्तव में, 'बी' इनपुट बॉक्स में टाइप किया जाता है। लेकिन 9, 0 और 9, 9 (पूर्व जिनमें से मैं MDC वेब साइट से सही लिया) दोनों मेरे FF3 के तहत फ़ायरबग में इन त्रुटियों को दे:

Permission denied to get property XULElement.popupOpen 
[Break on this error] this.input.focus()[0].dispatchEvent(event); 

Permission denied to get property XULElement.overrideValue 
[Break on this error] this.input.focus()[0].dispatchEvent(event); 

Permission denied to get property XULElement.selectedIndex 
[Break on this error] this.input.focus()[0].dispatchEvent(event); 

Permission denied to set property XULElement.selectedIndex 
[Break on this error] this.input.focus()[0].dispatchEvent(event); 

मैं ऐसे सुना है (का कोई स्पष्ट परिभाषा के साथ 'ऐसी') घटनाएं 'अविश्वसनीय' हैं, जो इन त्रुटियों को समझा सकती हैं।

दूसरा दृष्टिकोण घटना के रूप में जो भी मूल्य डालता है उसका कारण बनता है। जिसे घटना के रूप में पारित किया जाना है। लेकिन कोई प्रभाव नहीं है (भले ही मैं 9 के बजाय 98 का ​​उपयोग करता हूं, बॉक्स में कोई 'बी' टाइप नहीं किया जाता है।) यदि मैं जिस ऑब्जेक्ट को पास कर रहा हूं उसमें event.data सेट करने का प्रयास करता हूं, जब ईवेंट ट्रिगर होता है तो यह अपरिभाषित होता है। मैं जिस कोड का उपयोग कर रहा हूं वह यह देखने के लिए है कि:

$('#hi').keypress(function(e) { 
    console.log(e); 
}); 

कोई अन्य विचार?

Answer 1

जिस समाधान के साथ मैं समाप्त हुआ, वह "फोकस स्टीयर" div (टैबिन्डेक्स = -1 के साथ - फोकस हो सकता है लेकिन प्रारंभ में टैबबैड नहीं किया जा सकता है) को बनाने के लिए है जिसमें मैं क्षेत्र के दोनों तरफ फोकस मैन्युअल रूप से प्रबंधित करना चाहते हैं। फिर मैंने पूरे क्षेत्र पर फोकस और धुंध के लिए एक बुलबुले-सच्ची घटना श्रोता लगाया। जब क्षेत्र पर कोई फोकस होता है, तो टैबिन्डेक्स मान -1 में बदल जाते हैं, और जब कोई धुंध होता है, तो वे 0 पर बदल जाते हैं। इसका मतलब है कि क्षेत्र में केंद्रित होने पर, आप टैब या शिफ्ट-टैब को बाहर कर सकते हैं और अन्य पेज तत्वों या ब्राउज़र UI तत्वों पर सही ढंग से समाप्त होता है, लेकिन जैसे ही आप वहां से बाहर निकलते हैं, फोकस स्टील्स टैबबबल बन जाते हैं, और फोकस पर वे मैन्युअल क्षेत्र को सही तरीके से सेट करते हैं और उनके अंत में तत्व पर ध्यान केंद्रित करते हैं, जैसे कि आपने एक छोर या मैन्युअल क्षेत्र के दूसरे पर क्लिक किया था।

Answer 2

वास्तव में, मुझे लगता है कि एक तरीका है, भले ही यह एक प्रमुख पिटा है। मैं यह सुनिश्चित कर सकता हूं कि प्रत्येक तत्व, स्वाभाविक रूप से एक टैब-स्टॉप होने पर, एक एक्सटैबिन्डेक्स है, किसी भी तरह से उचित क्रम में, भले ही मैं अन्य लोगों के विगेट्स में गिर रहा हूं और इसलिए jQuery के उपयोग के बाद इन्हें जोड़ने के बजाय इसे HTML या अन्य प्रारंभिक भवन कोड में निर्दिष्ट करने में सक्षम है। फिर, मेरे पूरे रूप में एक असली tabindex होगा। हालांकि इसमें फोकस है, यह कुंजीपेशियों को अवशोषित करेगा, और यदि वे टैब या शिफ्ट + टैब हैं, तो एक्सटैबिन्डेक्स पर आधारित नकली फोकस को ले जाएं। यदि टैब को आखिरी (या पहले पर Shift + टैब) तत्व पर दबाया जाता है, तो यह कीस्ट्रोक को घुमाएगा, इस प्रकार ब्राउज़र को कुंजीपटल का उपयोग करके फॉर्म के बाहर अन्य पेज या ब्राउज़र UI तत्वों पर उचित ध्यान केंद्रित करने की इजाजत मिलती है।

मैं केवल अनुमान लगा सकता हूं कि इस दृष्टिकोण के किस प्रकार के अनपेक्षित दुष्प्रभाव लागू होंगे।

वास्तव में, यह एक समाधान भी नहीं है, क्योंकि मैं अभी भी इसका उपयोग कर अंतिम तत्व पर एक टैब नकली नहीं कर सकता।

Answer 3

यह समाधान मैं दो कस्टम नियंत्रण, एक पॉप-अप कैलेंडर और एक पॉप-अप यूनिट/मूल्य वजन चयनकर्ता (दो चयन के साथ एक div खुलेगी, पाठ बॉक्स पर क्लिक कर)

function tab_focus(elem) 
    var fields = elem.form.getElements() 
    for(var i=0;i<fields.length;i++) { 
    if(fields[i].id == elem.id){ 
     for(i=i+1;i<fields.length;i++){ 
     if(fields[i].type != 'hidden'){ 
      fields[i].focus() 
      return  
     } 
     } 
     break; 
    } 
    } 
    elem.form.focusFirstElement(); 
} 

के लिए हमारे webapp पर इस्तेमाल किया है

यह प्रोटोटाइप ढांचे का उपयोग कर रहा है और इसके पैरामीटर के रूप में विस्तारित तत्व (यानी $ ('thing_id')) की अपेक्षा करता है।

यह प्रपत्र का तत्व बनता है, और फॉर्म के तत्वों के माध्यम से तब तक लूप होता है जब तक कि यह स्वयं नहीं मिलता है।

फिर यह छुपा नहीं होने के बाद पहले तत्व की तलाश करता है, और इसे फोकस पास करता है।

यदि फॉर्म में इसके बाद कोई तत्व नहीं है, तो यह फोकस को फॉर्म में पहले तत्व पर वापस ले जाता है। मैं दस्तावेज़ के माध्यम से पृष्ठ पर अगला फॉर्म ढूंढ सकता हूं, लेकिन हमारे अधिकांश पृष्ठ एक ही फॉर्म का उपयोग करते हैं।

Answer 4

मुझे लगता है कि ये त्रुटियां स्वत: पूर्ण हैं। आप उन्हें सेट करके बंद करने के लिए सक्षम हो सकता है, इससे पहले कि आप घटना प्रेषण, स्वत: पूर्ण 'बंद'

setAttribute('autocomplete','off') 

Answer 5

मैं एक simple jQuery plugin जो इस समस्या को हल करता है बनाया से जोड़कर देखते हैं। यह अगले 'टैबबेल' तत्व को खोजने के लिए jQuery UI के 'टैबबबल' चयनकर्ता का उपयोग करता है और इसे चुनता है।

उदाहरण उपयोग:

// Simulate tab key when element is clicked 
$('.myElement').bind('click', function(event){ 
    $.tabNext(); 
    return false; 
});