ฉันพยายามส่งแบบฟอร์มโดยกด Enter แต่ไม่แสดงปุ่มส่ง ฉันไม่ต้องการเข้าใช้ JavaScript ถ้าเป็นไปได้เพราะฉันต้องการให้ทุกอย่างทำงานบนเบราว์เซอร์ทั้งหมด (วิธีเดียวที่ฉันรู้คือ JS กับกิจกรรม)

ตอนนี้แบบฟอร์มมีลักษณะดังนี้:

<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>

ซึ่งใช้งานได้ดีทีเดียว ปุ่มส่งทำงานได้เมื่อผู้ใช้กด Enter และปุ่มจะไม่แสดงใน Firefox, IE, Safari, Opera และ Chrome อย่างไรก็ตามฉันยังคงไม่ชอบวิธีแก้ปัญหาเนื่องจากยากที่จะทราบว่าจะใช้งานได้กับทุกแพลตฟอร์มกับเบราว์เซอร์ทั้งหมดหรือไม่

ทุกคนสามารถแนะนำวิธีที่ดีกว่าได้ไหม หรือสิ่งนี้เกี่ยวกับดีเท่าที่ได้รับ?

ลอง:

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

ที่จะกดปุ่ม waaay ไปทางซ้ายออกจากหน้าจอ สิ่งที่ดีในการทำเช่นนี้คือคุณจะได้รับการเสื่อมสลายอย่างงดงามเมื่อปิดการใช้งาน CSS

ปรับปรุง - วิธีแก้ปัญหาสำหรับ IE7

ตามที่แนะนำโดย Bryan Downing + with tabindexเพื่อป้องกันแท็บถึงปุ่มนี้ (โดย Ates Goral):

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

ฉันคิดว่าคุณควรไปเส้นทาง Javascript หรืออย่างน้อยฉันจะ:

<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>

คุณเคยลองสิ่งนี้หรือไม่?

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

เนื่องจากเบราว์เซอร์ส่วนใหญ่เข้าใจvisibility:hiddenและใช้งานไม่ได้จริง ๆdisplay:noneฉันจึงเดาว่าน่าจะใช้ได้ ยังไม่ได้ทดสอบด้วยตัวเองจริงๆดังนั้น CMIIW

โซลูชันอื่นที่ไม่มีปุ่มส่ง:

HTML

<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;
    }
  });

});

สำหรับใครก็ตามที่ดูคำตอบนี้ในอนาคต HTML5 จะใช้คุณสมบัติใหม่สำหรับองค์ประกอบของแบบฟอร์ม hiddenซึ่งจะนำไปใช้โดยอัตโนมัติdisplay:noneไปกับองค์ประกอบของคุณ

เช่น

<input type="submit" hidden />

ใช้รหัสต่อไปนี้แก้ไขปัญหาของฉันในเบราว์เซอร์ทั้ง 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"/>

เพิ่มบรรทัดด้านบนเป็นบรรทัดแรกในรหัสของคุณด้วยค่าชื่อและค่าที่เหมาะสม

แทนที่จะเป็นการแฮ็คที่คุณใช้เพื่อซ่อนปุ่มมันจะง่ายกว่ามากหากตั้งค่าvisibility: collapse;ในลักษณะของสไตล์ อย่างไรก็ตามฉันขอแนะนำให้ใช้ Javascript ง่ายๆเพื่อส่งแบบฟอร์ม เท่าที่ฉันเข้าใจการสนับสนุนสิ่งต่าง ๆ ในปัจจุบันเป็นที่แพร่หลาย

เพียงตั้งค่าแอตทริบิวต์ที่ซ่อนไว้เป็นจริง:

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

วิธีที่ดีที่สุดในการทำเช่นนี้คือการคงปุ่มส่งไว้ แต่ตั้งค่าเป็นขอบการเว้นระยะห่างและขนาดแบบอักษรเป็น 0

สิ่งนี้จะทำให้ขนาดของปุ่ม 0x0

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

คุณสามารถลองด้วยตัวคุณเองและโดยการตั้งเค้าร่างให้กับองค์ประกอบคุณจะเห็นจุดซึ่งเป็นเส้นขอบด้านนอก "ล้อม" องค์ประกอบ 0x0 px

ไม่จำเป็นต้องมีทัศนวิสัย: ซ่อนเร้น แต่ถ้ามันทำให้คุณนอนตอนกลางคืนคุณสามารถโยนมันลงไปในส่วนผสมได้เช่นกัน

JS Fiddle

IE ไม่อนุญาตให้กดปุ่ม ENTER เพื่อส่งแบบฟอร์มหากมองไม่เห็นปุ่มส่งและแบบฟอร์มมีมากกว่าหนึ่งช่อง ให้สิ่งที่ต้องการโดยให้ภาพโปร่งใสขนาด 1x1 พิกเซลเป็นปุ่มส่ง แน่นอนว่ามันต้องใช้พิกเซลของเลย์เอาต์ แต่ดูสิ่งที่คุณต้องทำเพื่อซ่อนมัน

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

นี่คือโซลูชันของฉันผ่านการทดสอบใน Chrome, Firefox 6 และ IE7 +:

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

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

ใช้งานได้ดีและเป็นรุ่นที่ชัดเจนที่สุดของสิ่งที่คุณพยายามจะทำ

โปรดทราบว่ามีความแตกต่างระหว่างdisplay:noneและvisibility:hiddenสำหรับองค์ประกอบรูปแบบอื่น ๆ

โซลูชัน HTML5

<input type="submit" hidden />

วิธีที่ง่ายที่สุด

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

สำหรับผู้ที่มีปัญหากับ IE และสำหรับคนอื่นด้วย

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

คุณสามารถลองสิ่งนี้

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

คุณสามารถรวมภาพที่มีความกว้าง / ความสูง = 0 px

ฉันทำงานกับเฟรมเวิร์ก UI จำนวนมาก หลายคนมีคลาสในตัวคุณสามารถใช้เพื่อซ่อนสิ่งต่าง ๆ ได้

เงินทุน

<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;
}

ฉันเพิ่มไปยังฟังก์ชันในเอกสารพร้อม หากไม่มีปุ่มส่งในแบบฟอร์ม (แบบฟอร์มกล่องโต้ตอบ Jquery ของฉันทั้งหมดไม่มีปุ่มส่ง) ให้ต่อท้าย

$(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);
    });
}

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

ฉันเคยใช้:

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

และ:

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

ในไฟล์. css มันทำงานได้อย่างน่าอัศจรรย์สำหรับฉันด้วย :)