आईओएस पर जावास्क्रिप्ट: एक HTML चयन तत्व खोलना

Question

मुझे आशा नहीं है, लेकिन मैं बस मामले में पूछूंगा।

मैं आईफोन/आईपैड के लिए मोबाइल सफारी में एक चुनिंदा तत्व खोलने के लिए जावास्क्रिप्ट का उपयोग करने में सक्षम होना चाहता हूं।

एक व्यापक Google/स्टैक ओवरफ़्लो खोज से पता चलता है कि बहुत से लोग ब्राउज़र में सामान्य रूप से ऐसा करने में सक्षम होना चाहते हैं, लेकिन यह समर्थित नहीं है (क्यों नहीं, मुझे आश्चर्य है?)। चुनिंदा तत्व पर focus() पर कॉल करने और size संपत्ति को बदलने के लिए तत्वों को देखने के लिए, या <div> और <ul> तत्वों के साथ पूरी तरह से नकली चयन तत्व बनाने के लिए विभिन्न हैक्स सुझाए गए हैं। हालांकि, मैं आईपैड और आईफोन में देशी ब्राउजर चुनिंदा नियंत्रणों का उपयोग करना चाहता हूं।

मुझे आश्चर्य हुआ, बस शायद, किसी को यह करने के लिए मालिकाना ऐप्पल वेबकिट विधि के बारे में पता हो सकता है। यह कुछ इस तरह होगा:

var myselect = document.getElementsByTagName("select")[0]; 
myselect.open(); // this method doesn't exist 

एक बोनस के रूप में, यह भी एक बूलियन संपत्ति है कि कहते हैं कि क्या चयन तत्व वर्तमान में खुले/सक्रिय, या नहीं (यानी सिर्फ तत्व है कि क्या नहीं है के बारे में पता करने के लिए आसान हो जाएगा फोकस है)। मुझे पता है कि मैं क्लिक करके घटनाओं को बदलकर इसे बाहर कर सकता हूं, लेकिन एक साधारण संपत्ति उपयोगी होगी।

इच्छापूर्ण सोच?

---

अद्यतन:
मैं अभी तक उत्तर नहीं है, लेकिन मैं पाया है कि एक mousedown अनुकरण सफलतापूर्वक गूगल क्रोम में एक का चयन तत्व को खोलता है, लेकिन नहीं iPad या फ़ायरफ़ॉक्स और इतने पर:

function simulateMouseEvent(eventName, element) { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent(eventName, true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    element.dispatchEvent(evt); 
} 

simulateMouseEvent("mousedown", select); 

अद्यतन:
मैं चयन बॉक्स यहाँ पर संबंधित है, लेकिन अलग (! और इसी तरह अनुत्तरित) प्रश्न पूछा गया है: Is there a DOM event that fires when an HTML select element is closed?

Answer 1

जेएस के साथ एचटीएमएल नियंत्रण ट्रिगर करना एक बहुत भूरा क्षेत्र है, आंशिक रूप से सुरक्षा कारणों से, और आंशिक रूप से समर्थन की कमी के कारण। यहां तक ​​कि jQuery जैसे ढांचे का उपयोग करके, आप click() पर एक बटन पर click() जैसे ही इसका अनुसरण करने के लिए एक लिंक नहीं कर सकते - आपको ब्राउज़र स्तर पर मूल क्लिक ईवेंट ट्रिगर करने की आवश्यकता है (मुझे विश्वास है कि सेलेनियम का नवीनतम संस्करण यह करता है, लेकिन यह है इस समस्या के लिए एक परीक्षण ढांचा इतना अनुपयुक्त है)। क्रोम में आंशिक परिणाम प्राप्त करने में सक्षम होने पर बधाई! हालांकि, आपको एक सार्वभौमिक समाधान नहीं मिलेगा जो वास्तविक चयन इनपुट का उपयोग करता है।

मैं एक अलग प्रकार के नियंत्रण का उपयोग करने का सुझाव दूंगा - या तो यदि आप एक फीचर को सक्रिय करने के लिए एक प्रेस करना चाहते हैं, या लेबल्स द्वारा समर्थित रेडियो बटनों का एक ढेर (थोड़ा सीएसएस के साथ) यदि आप चाहते हैं तो बटन का लंबवत ढेर बहु-विकल्प प्रारूप।

Answer 2

क्या आपने change() विधि की कोशिश की है?

Answer 3

चुनिंदा तत्व को दिखने की आवश्यकता है। आप jQuery का उपयोग करते हैं तो आप यह कर सकते हैं:

$('mySelectElementSelector').focus(); 

मोबाइल पर यह डिफ़ॉल्ट चयन नियंत्रण दिखाई देगा। डेस्कटॉप पर बस चयन नियंत्रण पर ध्यान केंद्रित करें।

Answer 4

मेरे पास इसके लिए एक समाधान समाधान है जो आईओएस और एंड्रॉइड के हाल के संस्करणों पर काम करता है। मैंने अभी तक पुराने संस्करणों पर परीक्षण नहीं किया है। इसके बारे में कोई दो तरीके नहीं हैं: यह समाधान एक हैक है। लेकिन अगर यह ध्यान से लागू किया जाता है तो यह काम करता है।

मेरी स्थिति में मेरे पास आईओएस 7 टॉगल स्विच तत्व था। मैं स्विच चालू होने पर select के लिए पिकर व्यू चाहता था। मेरे मामले में हमें उपयोगकर्ता को select फ़ील्ड को देखने की आवश्यकता नहीं थी या नहीं। हम केवल आईओएस के अच्छे स्क्रोलली-पिकर इंटरफ़ेस का उपयोग करना चाहते थे।

मैंने स्थिति के लिए सीएसएस का उपयोग किया और select स्विच पर पूरी तरह से फैलाया। इसके बाद मैंने opacity को सीएसएस में opacity: .001; जैसे कुछ सेट किया जो इसे सभी उद्देश्यों और उद्देश्यों के लिए अदृश्य बनाता है। यह अभी भी अस्पष्टता 0 के साथ काम कर सकता है लेकिन मुझे लगता है कि थोड़ा अस्पष्टता छोड़कर सुरक्षित हो सकता है और आप वास्तव में इसे सब कुछ नहीं देख सकते हैं। अब जब उपयोगकर्ता स्क्रीन के क्षेत्र को टैप करता है जो स्विच प्रदर्शित कर रहा है तो टैप ईवेंट वास्तव में select पर जा रहे हैं जो पिकर दृश्य को प्रदर्शित करने का कारण बनता है।

select की घटना पर को पूरी तरह से छिपाने के लिए display: none; सेट करें। इसका अर्थ यह है कि जब उपयोगकर्ता इसे बंद करने के लिए स्विच को छूता है तो वे स्विच के साथ बातचीत कर रहे हैं। जब स्विच को बंद कर दिया जाता है तो मैं display: block को select को सक्रिय स्थिति में वापस करने के लिए सेट करता हूं।

मेरा उपयोग मामला संकीर्ण है लेकिन स्थिति/अस्पष्टता तकनीक कई उपयोग मामलों के लिए अनुकूलनीय होनी चाहिए, हालांकि आपको उन क्षेत्रों में 2 select तत्व हो सकते हैं जहां आप फ़ील्ड दिखाना चाहते हैं।

यहां तकनीक का प्रदर्शन करने वाला एक स्क्रीनशॉट है। डेमो प्रयोजनों के लिए opacity इस स्क्रीनशॉट में 0.25 पर सेट है। जब आप इसे 0,001 करने के लिए सेट आप select