322

वैसे मैं एंटर दबाकर फॉर्म जमा करने की कोशिश कर रहा हूं लेकिन सबमिट बटन नहीं दिखा रहा है। मैं जावास्क्रिप्ट में नहीं आना चाहता अगर संभव हो तो मैं चाहता हूं कि सब कुछ सभी ब्राउज़रों पर काम करें (केवल जेएस तरीका मुझे पता है कि घटनाओं के साथ है)।

अभी फॉर्म कुछ इस तरह दिखता है:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

जो बहुत अच्छा काम करता है। सबमिट बटन तब काम करता है जब उपयोगकर्ता दबाता है, और बटन फ़ायरफ़ॉक्स, IE, सफारी, ओपेरा और क्रोम में नहीं दिखता है। हालाँकि, मुझे अभी भी समाधान पसंद नहीं है क्योंकि यह जानना मुश्किल है कि क्या यह सभी ब्राउज़रों के साथ सभी प्लेटफार्मों पर काम करेगा।

क्या कोई बेहतर तरीका सुझा सकता है? या यह इस बारे में जितना अच्छा है उतना अच्छा है?

html forms submit

— abatishchev
स्रोत

7

छोटे बिंदु जो आपके सीएसएस से कुछ वर्णों को दाढ़ी कर सकते हैं और आमतौर पर स्वचालित रूप से मिनिफ़ायर हो जाएंगे- आपको शून्य लंबाई माप के लिए इकाइयों की आवश्यकता नहीं है। 0px = 0pt = 0em = 0em आदि

— pwdst

@pwdst इसे इंगित करने के लिए धन्यवाद - मैं पायथन दुनिया से हूं, इसलिए "स्पष्ट रूप से निहित से बेहतर है", और वास्तव में सोच रहा था कि क्या यह सीएसएस में मामला है, या क्या सीएसएस रचनाकारों का एक अलग मुहावरा है?

— ericmjl 16

2

शून्य यहां नियम का अपवाद है @ericmjl - 0px == 0em == 0% == 0vh == 0vh आदि अन्य (गैर-शून्य) लंबाई माप में यह केवल बुरा अभ्यास नहीं है, लेकिन मानकों के खिलाफ इकाइयों और निर्दिष्ट करने के लिए नहीं है। आप उपयोगकर्ता एजेंटों (ब्राउज़रों) में भिन्न व्यवहार देखेंगे। देखें developer.mozilla.org/en-US/docs/Web/CSS/length और drafts.csswg.org/css-values-3/#lengths

— pwdst

2

यदि संदेह है, तो दूसरे शब्दों में एक स्पष्ट लंबाई इकाई डालें।

— pwdst 10

3

हालांकि यह निश्चित रूप से 0 के साथ इकाई को जोड़ने के लिए चोट नहीं करता है, किसी को भी भाषा की परवाह किए बिना 100% वैध होना चाहिए, वास्तव में सभी तरह से गणितीय सार तक। OTOH, उनके होने का बनाम उनका उपयोग न करने का संदेश यह संदेश देना है कि क्या दी गई संपत्ति "वास्तव में 0 होने वाली है, और इस तरह रहें" (कोई इकाई नहीं), बनाम "यह बात अब शून्य हो जाती है।" लेकिन स्वाद के लिए समायोजित किया जा सकता है; या जो भी ... "(इकाई के साथ)।

— एस.जे.

237

प्रयत्न:

<input type="submit" style="position: absolute; left: -9999px"/>

यह स्क्रीन से बाहर, बाईं ओर बटन waaay को धक्का देगा। इसके साथ अच्छी बात यह है कि जब CSS को निष्क्रिय किया जाता है, तो आपको सुंदर गिरावट मिलेगी।

अद्यतन - IE7 के लिए समाधान

जैसा कि ब्रायन डाउनिंग + द्वारा सुझाव दिया गया है कि tabindexटैब को इस बटन तक पहुँचने से रोका जाए (एट्स गोरल द्वारा):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

— अत्र गोराल
स्रोत

9

बस IE7 में Erebus के समान परिणाम के साथ इस समाधान की कोशिश की। निम्न कोड इसे ठीक करता है:position: absolute; width: 1px; height: 1px; left: -9999px;

— ब्रायन डाउनिंग

84

क्या एक भयानक हैक :( पहली जगह में HTML ऐसा क्यों है? क्या इस मामले में काम न करने का एक अच्छा कारण है?

— nornagon

28

@ नोर्नगन: यदि आपको लगता है कि यह हैक भयानक है, तो कम भयानक सुझाव देने के लिए स्वतंत्र महसूस करें। HTML क्या है ...

— Ates Goral

13

@मोसेफैक्टिवtabindex="-1"

— एट्स गोरल

14

"अच्छी बात है ... सुंदर अक्षमता जब सीएसएस अक्षम है" ?! मुझे यकीन है, यह बहुत अच्छा काम करता है, लेकिन "सुंदर गिरावट" हिस्सा सिर्फ मार्केटिंग रणनीति है। मैंने इसके बारे में तब तक नहीं सुना था जब तक कि मुझे यह पेज वर्ष 2002 से नहीं मिला । यह सही है, "सीएसएस ब्राउज़र में अक्षम है" के लिए पहले पृष्ठ पर एकमात्र Google परिणाम 10 साल पहले से है (या 7 इस विचार को 2009 में रखा गया था)।

— विक्की चिजवानी

97

मुझे लगता है कि आपको जावास्क्रिप्ट मार्ग पर जाना चाहिए , या कम से कम मैं:

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>


<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

— strager
स्रोत

6

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

— andyk

3

इससे सबमिट बटन एक पल के लिए दिखाई देगा (जब तक कि पेज लोड नहीं होता है और जेएस चलता है)।

— नूरगाँव

15

स्वत: पूर्ण से चयन के लिए एक कुंजीपट भी ट्रिगर किया जाता है, अर्थात यदि उपयोगकर्ता एक ईमेल पते पर इनपुट कर रहा है और वह / वह ब्राउज़र के स्वत: पूर्ण से दिए गए एक को दर्ज करके चयन करता है, तो आपका फॉर्म सबमिट हो जाएगा। न कि आपके उपयोगकर्ता क्या उम्मीद करेंगे।

— cburgmer

2

मैंने व्यापक समर्थन के लिए keydownसे स्विच किया keypress, लेकिन अगर आपको क्रोम का समर्थन करने की उम्मीद है e.preventDefault();, ifतो आपको पहले जोड़ना होगा ।

— कैम्पबेलन

1

@ मान लें कि आप .on('keypress'...)इसके बजाय उपयोग करने में सक्षम हो सकते हैं । यह .on()देखने के लिए डॉक्स आपके लिए .preventDefault()कॉल करता है ।

— jinglesthula

79

क्या आपने यह कोशिश की है?

<input type="submit" style="visibility: hidden;" />

चूंकि अधिकांश ब्राउज़र समझते हैं visibility:hiddenऔर यह वास्तव में काम नहीं करता है display:none, इसलिए मैं अनुमान लगा रहा हूं कि यह ठीक होना चाहिए, हालांकि। वास्तव में इसे स्वयं परीक्षण नहीं किया, इसलिए CMIIW।

— andyk
स्रोत

3

वहाँ के बारे में सिर्फ एक चीज है visibility: hidden: जैसा कि आप w3schools में पढ़ सकते हैं , दृश्यता: कोई भी अभी भी लेआउट को प्रभावित नहीं करता है। यदि आप इस व्हाट्सएप से बचना चाहते हैं, तो पूर्ण स्थिति वाला समाधान मेरे लिए बेहतर प्रतीत होता है।

— लोयबर्ट सेप

8

आप दोनों समाधानों को मिला सकते हैं:<input type="submit" style="visibility: hidden; position: absolute;" />

— VaclavSir

2

लानत है, यह IE8 में काम नहीं करता है (यह फॉर्म जमा नहीं करता है), इसलिए उपरोक्त जीत से समाधान:position: absolute; left: -100px; width: 1px; height: 1px;

— VaclavSir

31

सबमिट बटन के बिना एक और समाधान:

एचटीएमएल

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery

$(document).ready(function() {

  $('.submit_on_enter').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});

— damoiser
स्रोत

1

अजीब चाल। कि आप अपने बटन को टेक्स्ट बॉक्स में बनाएँ! लेकिन जब से यह ट्रिक सभी ब्राउज़र के लिए काम करता है, मैंने आपको क्रेडिट कर दिया है!

— जेना लीफ

धन्यवाद @JennaLeaf ;-) वैसे भी मुझे लगता है कि यह इतना अजीब नहीं है - ऑनलाइन रूपों के बहुत सारे केडाउन के "ट्रिगर" सबमिट करें। एक उदाहरण Google खोज-बार हो सकता है (शायद वे इस कोड का बिल्कुल उपयोग नहीं करते हैं, लेकिन शायद कुछ इसी तरह का)।

— डेमॉइजर

16

भविष्य में इस उत्तर को देखने वाले किसी भी व्यक्ति के लिए, HTML5 फॉर्म तत्वों के लिए एक नई विशेषता लागू करता है hidden, जो स्वचालित रूप display:noneसे आपके तत्व पर लागू होगा ।

जैसे

<input type="submit" hidden />

— Panomosh
स्रोत

जबकि यह डेस्कटॉप क्रोम के साथ काम करता है, यह iPhone पर क्रोम या सफारी के साथ काम नहीं करता है।

— उल्फा एडम्स

@UlfAdams यह iPhone 12.1.2 पर क्रोम और सफारी के साथ काम करता है।

— मैथ्यू कैंपबेल

13

निम्नलिखित कोड का उपयोग करें, यह मेरी समस्या को सभी 3 ब्राउज़र (FF, IE और Chrome) में तय करता है:

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

नाम और मूल्य के उचित मूल्य के साथ अपने कोड में पहली पंक्ति के रूप में उपरोक्त पंक्ति जोड़ें।

— मयंक गुप्ता
स्रोत

7

वर्तमान में आप बटन को छिपाने के लिए जिस हैक का उपयोग करते हैं, उसके बजाय यह visibility: collapse;शैली की विशेषता में सेट करना बहुत सरल होगा । हालाँकि, मैं अभी भी फार्म जमा करने के लिए सरल जावास्क्रिप्ट के एक बिट का उपयोग करने की सिफारिश करूंगा। जहां तक मैं समझता हूं, आजकल ऐसी चीजों का समर्थन सर्वव्यापी है।

— Noldorin
स्रोत

7

बस छिपी विशेषता को सच करने के लिए सेट करें:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

— jumpnett
स्रोत

4

छिपा हुआ गुण दर्ज करें दबाकर सबमिट को अक्षम कर देगा।

— 66 टन 99

@ 66Ton99 FF में बस परीक्षण। यह

— सबमिटेशन को

1

"यह मेरी मशीन पर काम करता है";) फ़ायरफ़ॉक्स की तुलना में बहुत अधिक ब्राउज़र हैं। कोई यकीनन एक समाधान चाहता है जो मज़बूती से क्रॉस-ब्राउज़र वार काम करता है।

— फेलिक्स गागन-ग्रेनियर

Chrome 63

— piotr_cz

इस समय iPhone पर Chrome या Safari में काम नहीं करता है।

— उल्फ एडम्स

7

ऐसा करने का सबसे सुरुचिपूर्ण तरीका सबमिट-बटन रखना है, लेकिन इसे सीमा, पैडिंग और फ़ॉन्ट-आकार 0 पर सेट करना है।

यह बटन आयाम 0x0 बना देगा।

<input type="submit" style="border:0; padding:0; font-size:0">

आप इसे स्वयं आज़मा सकते हैं, और उस तत्व के लिए एक रूपरेखा निर्धारित करके आप एक डॉट देखेंगे, जो कि 0x0 px तत्व के बाहर "बॉर्डर" है।

दृश्यता की कोई आवश्यकता नहीं: छिपा हुआ है, लेकिन अगर यह आपको रात में सोता है, तो आप इसे मिश्रण में भी फेंक सकते हैं।

जेएस फिडल

— वाल्टूर बुर्क
स्रोत

5

IE फॉर्म सबमिट करने के लिए ENTER कुंजी दबाने की अनुमति नहीं देता है अगर सबमिट बटन दिखाई नहीं देता है, और फॉर्म में एक से अधिक फ़ील्ड हैं। इसे सबमिट बटन के रूप में 1x1 पिक्सेल की पारदर्शी छवि प्रदान करके इसे क्या देना है। बेशक यह लेआउट का एक पिक्सेल लेगा, लेकिन इसे छिपाने के लिए आपको क्या करना है, यह देखें।

<input type="image" src="img/1x1trans.gif"/>

— विंस्टन टैम्बलिन
स्रोत

4

यह मेरा समाधान है, क्रोम, फ़ायरफ़ॉक्स 6 और IE7 + में परीक्षण किया गया:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

— vjnrv
स्रोत

IE8 की तरह लगता है स्थिति पसंद नहीं है: निरपेक्ष, यह प्रस्तुत नहीं करता है।

— मैक्सिमम जूल

4

<input type="submit" style="display:none;"/>

यह ठीक काम करता है और यह सबसे स्पष्ट संस्करण है जिसे आप प्राप्त करने की कोशिश कर रहे हैं।

ध्यान दें कि अन्य फार्म तत्वों के बीच display:noneऔर अंतर है visibility:hidden।

— Shammoo
स्रोत

4

HTML5 समाधान

<input type="submit" hidden />

— एंड्रयू लुका
स्रोत

ऊपर के समान - iPhone पर Chrome या Safari के साथ काम नहीं करता है।

— उल्फा एडम्स

3

सबसे सरल तरीका है

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

— शाहीन ममदजादा
स्रोत

2

उन लोगों के लिए जिनके पास IE और अन्य लोगों के साथ भी समस्याएं हैं।

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

— Jekis
स्रोत

मैं अभी भी स्थिति का उपयोग करूंगा: निरपेक्ष, फ्लोट लेआउट को प्रभावित करता है।

— सुपरडक

IE8 की तरह लगता है स्थिति पसंद नहीं है: निरपेक्ष, यह प्रस्तुत नहीं करता है। मैं उपयोग करता हूं:

— मैक्स

उसी के लिए float: left;, जब हटाया जाता है, तो यह जमा हो जाता है।

— मैक्सिमम जूल

2

आप यह भी कोशिश कर सकते हैं

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

आप चौड़ाई / ऊँचाई = 0 px के साथ एक छवि शामिल कर सकते हैं

— waney
स्रोत

1

महत्वपूर्ण: आप एक मान्य छवि URL का उपयोग करें या फ़ायरफ़ॉक्स आपके पृष्ठ पर एक "सबमिट क्वेरी" पाठ दिखाएगा

— PH।

2

यदि आप एक ऐसी छवि जोड़ते हैं जो मौजूद है और ऊंचाई और चौड़ाई को शून्य पर सेट करती है, या एक गैर-मौजूद छवि को जोड़ती है, तो ब्राउज़र को संसाधन के लिए एक बर्बाद जीईटी अनुरोध करना होगा।

— pwdst

2

मैं यूआई फ्रेमवर्क के एक समूह के साथ काम करता हूं। उनमें से कई में एक अंतर्निहित वर्ग है जिसका उपयोग आप नेत्रहीन चीजों को छिपाने के लिए कर सकते हैं।

बूटस्ट्रैप

<input type="submit" class="sr-only" tabindex="-1">

कोणीय सामग्री

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

शानदार दिमाग जिन्होंने इन रूपरेखाओं को बनाया है, उन्होंने इन शैलियों को इस प्रकार परिभाषित किया है:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

— एच डॉग
स्रोत

1

मैंने इसे तैयार दस्तावेज़ पर एक फ़ंक्शन में जोड़ा। यदि फॉर्म पर कोई सबमिट बटन नहीं है (मेरे सभी जेकरी डायलॉग फॉर्म में बटन सबमिट नहीं हैं), इसे संलग्न करें।

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

— seePatCode
स्रोत

0

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

— मार्टी
स्रोत

-2

मैंने उपयोग किया है:

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

तथा:

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

.css फ़ाइल में। इसने मेरे लिए जादुई रूप से भी काम किया। :)

— मिहाई साविन
स्रोत

सबमिट बटन के बिना एंटर दबाकर फॉर्म सबमिट करें

बूटस्ट्रैप

कोणीय सामग्री