2012-03-08 15 views
18

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

इस फ़ॉर्म में कुछ रेडियो बटन और कुछ टेक्स्ट फ़ील्ड और एक सबमिट बटन है।

आईपैड में वर्चुअल कीबोर्ड जाओ बटन को एंटर कुंजी विज्ञापन करना होता है, जिससे प्रपत्र में पहला सबमिट बटन क्लिक किया जा सकता है और फॉर्म पोस्ट किया जा सकता है।

फ़ॉर्म पूरा होने से पहले अत्यधिक अनैच्छिक पोस्टिंग से बचने के लिए हमने फॉर्म में एक अतिरिक्त सबमिट बटन जोड़ा, बिल्कुल दृश्य क्षेत्र के बाहर स्थित है जहां "झूठी वापसी" है। यह सफारी मोबाइल को छोड़कर हर ब्राउज़र में आकस्मिक पोस्टिंग को रोकने वाले एंटर कीस्ट्रोक को हाइजैक करता है।

आईपैड पर हमने ओपेरा मोबाइल का भी परीक्षण किया और यह अपेक्षा के अनुसार काम करता है।

लेकिन सफारी मोबाइल स्पष्ट रूप से वापसी झूठ को अनदेखा करता है क्योंकि बटन पर क्लिक करने से ईवेंट एक पोस्ट का कारण बनता है जो कोई अन्य ब्राउज़र नहीं करता है, पीसी पर सफारी भी नहीं।

मेरे सवालों का

1 हैं: क्यों सफारी मोबाइल अनदेखी कर रहा है "return false" प्रस्तुत पर, यहाँ खेल में एक अन्य व्यवस्था नहीं है?

2: मैं कैसे जब GO पर क्लिक प्रपत्र पोस्ट करने से सफारी मोबाइल बंद कर सकते हैं?

मैंने Google और स्टैक ओवरफ्लो पर कई खोज किए हैं और कई उदाहरण पाए हैं, लेकिन सभी को जावास्क्रिप्ट और ईवेंट बाध्यकारी की आवश्यकता है और उपयोगकर्ता द्वारा उत्पन्न सामग्री के साथ फ़ॉर्म की गतिशील प्रकृति इस त्रुटि को प्रवण और सुंदर जटिल बनाता है क्योंकि लगभग सभी आवश्यक प्रत्येक टेक्स्टबॉक्स और textarea के लिए बाध्यकारी घटनाओं।

किसी भी समाधान है कि काम करता है अच्छा है, लेकिन सरल बेहतर है, खासकर अगर यह फार्म या घटनाओं है कि स्वत: पूर्ण या सत्यापन की घटनाओं के प्रतिकूल हो सकती की बहुत अनुकूलन करने की आवश्यकता नहीं है।

उदाहरण testpage: http://lab.dnet.nu/ipad.php

उत्तर

28

मैं अपने समस्या का समाधान मिल गया।

समस्या का आधार यह है कि सफारी मोबाइल बटन पर "झूठी वापसी" को अनदेखा करता है, यह केवल फॉर्मों पर काम करता है।

ऑनसबमिट सेट करना = "झूठी वापसी;" फॉर्म पर, एक सामान्य बटन (जमा नहीं) बनाना और ऑनक्लिक = "form.submit()" सेटिंग करना।

पूर्व।

<form method="post" onsubmit="return false;"> 
    ... //Other fields here 

    <input type="button" value="Send" onclick="form.submit();" /> 
</form> 

गो बटन सामान्य बटन ट्रिगर नहीं करता है, केवल बटन सबमिट करता है। चूंकि फॉर्म में onsubmit="return false;" है, यह पोस्ट नहीं करेगा।

दूसरी ओर बटन, क्लिक किए जाने onclick="form.submit();" जो फार्म पर ऑनसबमिट ओवरराइड करता है चलाता है।

यह समाधान किसी भी ब्राउज़र में विश्वसनीय रूप से काम करने लगता है।

+0

+1 निश्चित रूप से यह आ नहीं देखा। धन्यवाद –

0

बहुत अपरंपरागत लगता है, क्योंकि यह मूल रूप से सामान्य यूएक्स और अपेक्षित डिवाइस व्यवहार को तोड़ देता है।

हालांकि, मुझे लगता है कि यह भी उल्लेख करना महत्वपूर्ण है कि यह समाधान वास्तविक <form> DOM तत्व पर निर्भर करता है। बटन पर onclick हैंडलर का मतलब है कि सबमिट करने के लिए एक jQuery ऑब्जेक्ट का उपयोग नहीं करना चाहिए लेकिन DOM तत्व।

jQuery ऑब्जेक्ट। काम नहीं करता:

<input type="button" value="Send" onclick="$("#myform").submit();" /> 

डोम तत्व। काम करता है:

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" /> 

jQuery के बिना। काम करता है:

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" /> 

इसके अलावा, यहां, एक समान दृष्टिकोण है jQuery का उपयोग कर एक बटन पर कुंजीपटल सबमिट करता है और क्लिक्स केवल इजाजत दी रोकना। क्रेडिट @levi को जाता है: http://jsfiddle.net/RsKc7/

+0

ठीक है, सर्वर (सीएमएस) में प्लेटफॉर्म बाधाओं के कारण jQuery इस स्थिति में एक विकल्प नहीं है। और तोड़ने अपेक्षित व्यवहार के बारे में, ठीक है, इस मामले में ipad एक infoboot जहां से राहगीरों एक रूप का जवाब दे की तरह इस्तेमाल किया गया था, Ipad के लिए इस्तेमाल नहीं किसी भी एक पाया यह बहुत परेशान है कि प्रपत्र जब सब वे क्या करने की कोशिश कर रहा था, जहां पोस्ट किया गया अगले फ़ील्ड पर जाने के लिए कीबोर्ड बंद करें। हमारी राय में इसकी Ipad तरीका है कि अप्रत्याशित है, 170 लोगों की एक नहीं एक है कि इस्तेमाल किया है) तो, –

+0

इसके अलावा, जैसा बताया गया है, अन्य सभी मोबाइल ब्राउज़र से सफारी मोबाइल differes की "" व्यवहार हम Android और Windows पैड पर परीक्षण किया इस फ़ॉर्म के हमारे समाधान के बारे में कोई टिप्पणी है: डी –

0

यहाँ, एक अतिरिक्त जवाब मामला किसी को भी इस मुद्दे का पीछा करते हुए की तरह मैंने किया था ऊपर हवाओं में।

बशर्ते आप jQuery का उपयोग कर रहे हों, तो निम्न स्निपेट को "गो" बटन को फॉर्म सबमिशन ट्रिगर करने से रोकना चाहिए (कम से कम यह एंड्रॉइड 4.2.2 पर एंड्रॉइड 4.2.2 क्रोम पर है; वाईएमएमएमवी)। साथ ही, ध्यान दें कि यदि आप नीचे दिए गए इनपुट प्रकारों पर काम करने के लिए "एंटर" कुंजी को अनुमति देना चाहते हैं, तो इससे यह होने से रोका जा सकेगा।

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',  
    function (e) { 
     // Android maps the "Go" button to the Enter key => key code 13 
     if (e.keyCode == 13) { 
      return false; 
     } 
    }); 

संपादित करें: यह this bug टूटता एंड्रॉयड> 4.3 में क्रोम में keyup/keydown, जिस स्थिति में यह सुधार नहीं रह कुछ परिस्थितियों में काम करेंगे लगती है।

6

बेहतर उत्तर यह है। दूसरा आपको नियमित सबमिट बटन का उपयोग करने की अनुमति नहीं देता है। यह सिर्फ जाओ बटन पर हमला करता है।

$("body").keydown(function(){ 
    if(event.keyCode == 13) { 
     document.activeElement.blur(); 
     return false; 
    } 
}); 
+0

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

-1

मोबाइल बटन टच स्क्रीन कीबोर्ड पर जाएं बटन और वापसी बटन आपके पहले सबमिट बटन की ऑनक्लिक घटना को ट्रिगर करते हैं। अपने उपयोगकर्ता या स्क्रिप्ट बटन पर क्लिक करता है, तो यह निर्धारित करने के लिए, आपको निम्न का उपयोग कर सकते हैं:

$('#mybuttonId').onclick(e) { 
 
    if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) { 
 
    //This is the user clicking on the button. 
 
    } else { 
 
    //This is not the user, but a script , do nothing. 
 
    return false; 
 
    } 
 
}

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