किसी फॉर्म में पहले सबमिट-बटन को हाइलाइट करने से IE को रोकना

Question

किसी प्रपत्र में प्रवेश पर अपेक्षित व्यवहार HTML 4.01 Specification में अपरिभाषित प्रतीत होता है जबकि HTML 5 विनिर्देश says यह फ़ॉर्म में पहला सबमिट बटन होना चाहिए।

इंटरनेट एक्सप्लोरर (आईई) फॉर्म में पहला बटन हाइलाइट करता है जब फ़ॉर्म मालिकाना सीमा या कुछ जोड़कर ध्यान केंद्रित करता है। अन्य ब्राउज़र्स इस तरह के एक दृश्य सुराग नहीं जोड़ते हैं।

मैं डिफ़ॉल्ट के रूप में एक और बटन का उपयोग करना चाहता हूं और इस बटन को स्टाइल करना चाहता हूं ताकि सभी ब्राउज़र एक दृश्य सुराग प्रदान करेंगे कि यह डिफ़ॉल्ट बटन है। (हम एएसपी.नेट का उपयोग कर रहे हैं जो प्रति पृष्ठ एक फॉर्म का उपयोग करता है, और इसलिए पृष्ठों को डिज़ाइन करना मुश्किल है ताकि डिफ़ॉल्ट बटन हमेशा पहले आ जाए।)

जबकि मैं इसे अधिकांश ब्राउज़र में जावास्क्रिप्ट और सीएसएस के साथ आसानी से पूरा कर सकता हूं , मुझे आईई स्टॉप को पहले बटन को हाइलाइट करने में परेशानी हो रही है।

क्या आईई को पहले सबमिट-बटन को हाइलाइट करने या किसी भिन्न बटन को हाइलाइट करने के लिए कोई तरीका नहीं है? या क्या कोई अन्य समाधान है जिसे मैंने याद किया है?

Answer 1

अपने एएसपीनेट बटन नियंत्रण पर, useSubmitBehavior="false" सेट करें। यह सबमिट करने के बजाय HTML को बटन के रूप में प्रस्तुत करता है।

Answer 2

इस बटन के लिए किसी विशेष सीएसएस शैली (या कक्षा) को परिभाषित करने के बारे में क्या?

<input type="button" value="basic button" .../> 
<input type="button" style="border: solid 2px red;" value="default button" .../> 

Answer 3

आप नेट 2 का उपयोग कर रहे this आप

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

Answer 4

इस के आसपास जाने का एक तरीका फॉर्म के शीर्ष पर एक डमी बटन बनाना और इसे दृष्टि से बाहर ले जाना है। फिर जावास्क्रिप्ट में एंटर कुंजीकोड को संभालें और सीएसएस के साथ नया डिफ़ॉल्ट बटन स्टाइल करें।

हालांकि गंदा लगता है। कोई बेहतर विचार?

Answer 5

एएसपी.Net 2.0 ने डिफॉल्टबटन की अवधारणा भी पेश की।

यह कम से कम फार्म और पैनल तत्वों पर उपलब्ध है:

<form id="form1" runat="server" defaultbutton="Button2"> 
<div> 
    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox> 
    <br /> 
    <asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" /> 
    <br /> 
    <br /> 
    <asp:panel id="something" defaultbutton="button3" runat="server"> 
     <asp:TextBox id="TextBox2" runat="server"></asp:TextBox> 
     <br /> 
     <asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" /> 
     <br /> 
     <asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" /> 

    </asp:panel> 
    <br /> 
    <br /> 

</div> 
</form> 

तो, आप पृष्ठ लोड, या TextBox1 में पाठ प्रवेश कर रहे हैं, Button2 प्रस्तुत करेगा Enter दबा जब। जब आप टेक्स्टबॉक्स 2 में टेक्स्ट दर्ज कर रहे हैं तो एंटर दबाकर बटन 3 सबमिट होगा - जैसा कि आप पैनल के अंदर हैं।

यह एएसपी.NET द्वारा बनाई गई ऑनकीप्रेस विधि द्वारा संचालित है।

जब पृष्ठ लोड होता है, आईई और फ़ायरफ़ॉक्स दोनों बटन 2 (जैसा आप चाहते हैं) को हाइलाइट करते हैं।

यदि आपको पता है कि कौन सा बटन डिफॉल्टबटन के रूप में घोषित किया जाएगा, तो आप कभी भी सीएसएस का उपयोग कर सकते हैं जिसे आप आम तौर पर सभी ब्राउज़रों के लिए स्टाइल करने के लिए उपयोग करेंगे।

बल्कि, जब आप टेक्स्ट बॉक्स पर ध्यान केंद्रित करते हैं, तो आईई तब (गलत तरीके से) बटन 1 को हाइलाइट करेगा।

इसका कारण यह है IE के डिफ़ॉल्ट व्यवहार को कुछ जावास्क्रिप्ट ASP.Net द्वारा उत्सर्जित द्वारा ओवरराइड है:

<script type="text/javascript"> 
//<![CDATA[ 
WebForm_AutoFocus('Button2');//]]> 
</script> 

लेकिन, आईई तो ध्यान नहीं देगा कि एक बार एक और तत्व ध्यान केंद्रित किया है, और गलत बटन पर प्रकाश डाला करने के लिए वापस जाने के लिए (जो तब तक उपयोग नहीं किया जाता जब तक कि उपयोगकर्ता इस उदाहरण में स्पष्ट रूप से क्लिक नहीं करता)।

छवि बटन के साथ उन्हें बदलने के अलावा, मुझे यकीन नहीं है कि मैं और क्या सुझाव दे सकता हूं।

Answer 6

उपयोग इन सीएसएस शैलियाँ

a:active, a:focus,input, input:active, input:focus{  outline: 0;  outline-style:none;  outline-width:0; } 
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{  border: none; } 

या

:focus {outline:none;} ::-moz-focus-inner {border:0;} 

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

<system.webServer> 
    <httpProtocol> 
     <customHeaders> 
     <clear /> 
     <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" /> 
     </customHeaders> 
    </httpProtocol> 

    </system.webServer>