Yah saya mencoba mengirimkan formulir dengan menekan enter tetapi tidak menampilkan tombol kirim. Saya tidak ingin masuk ke JavaScript jika memungkinkan karena saya ingin semuanya berfungsi di semua browser (satu-satunya cara JS yang saya tahu adalah dengan acara).

Sekarang bentuknya terlihat seperti ini:

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

Itu bekerja dengan cukup baik. Tombol kirim berfungsi ketika pengguna menekan masuk, dan tombol tidak muncul di Firefox, IE, Safari, Opera dan Chrome. Namun, saya masih tidak suka solusinya karena sulit untuk mengetahui apakah itu akan berfungsi pada semua platform dengan semua browser.

Adakah yang bisa menyarankan metode yang lebih baik? Atau ini tentang sebaik yang didapatnya?

Mencoba:

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

Itu akan menekan tombol waaay ke kiri, keluar dari layar. Yang menyenangkan dengan ini adalah, Anda akan mendapatkan degradasi yang anggun ketika CSS dinonaktifkan.

Pembaruan - Penanganan masalah untuk IE7

Seperti yang disarankan oleh Bryan Downing + dengan tabindexuntuk mencegah tab mencapai tombol ini (oleh Ates Goral):

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

Saya pikir Anda harus pergi dengan rute Javascript, atau setidaknya saya akan:

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

Sudahkah Anda mencoba ini?

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

Karena sebagian besar browser mengerti visibility:hiddendan tidak benar-benar berfungsi display:none, saya kira itu seharusnya baik-baik saja. Belum benar-benar mengujinya sendiri, jadi CMIIW.

Solusi lain tanpa tombol kirim:

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

});

Bagi siapa pun yang melihat jawaban ini di masa mendatang, HTML5 mengimplementasikan atribut baru untuk elemen formulir hidden,, yang akan secara otomatis berlaku display:noneuntuk elemen Anda.

misalnya

<input type="submit" hidden />

Gunakan kode berikut, ini memperbaiki masalah saya di semua 3 browser (FF, IE dan Chrome):

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

Tambahkan baris di atas sebagai baris pertama dalam kode Anda dengan nilai nama dan nilai yang sesuai.

Alih-alih retasan yang saat ini Anda gunakan untuk menyembunyikan tombol, itu akan jauh lebih mudah untuk ditetapkan visibility: collapse;dalam atribut style. Namun, saya tetap merekomendasikan menggunakan sedikit Javascript sederhana untuk mengirimkan formulir. Sejauh yang saya mengerti, dukungan untuk hal-hal seperti itu ada di mana-mana saat ini.

Cukup atur atribut tersembunyi ke true:

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

Cara paling elegan untuk melakukan ini adalah mempertahankan tombol submit, tetapi atur border, padding dan font-size menjadi 0.

Ini akan membuat dimensi tombol 0x0.

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

Anda dapat mencobanya sendiri, dan dengan menetapkan garis besar ke elemen, Anda akan melihat sebuah titik, yang merupakan batas luar "yang mengelilingi" elemen 0x0 px.

Tidak perlu untuk visibilitas: tersembunyi, tetapi jika itu membuat Anda tidur di malam hari, Anda bisa melemparkannya ke dalam campuran juga.

JS Fiddle

IE tidak mengizinkan menekan tombol ENTER untuk pengiriman formulir jika tombol kirim tidak terlihat, dan formulir memiliki lebih dari satu bidang. Berikan apa yang diinginkannya dengan memberikan gambar transparan 1x1 piksel sebagai tombol kirim. Tentu saja akan membutuhkan piksel tata letak, tetapi lihat apa yang harus Anda lakukan untuk menyembunyikannya.

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

Ini adalah solusi saya, diuji di Chrome, Firefox 6 dan IE7 +:

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

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

Ini berfungsi dengan baik dan ini adalah versi paling eksplisit dari apa yang Anda coba capai.

Perhatikan bahwa ada perbedaan antara display:nonedan visibility:hiddenuntuk elemen formulir lainnya.

Solusi HTML5

<input type="submit" hidden />

cara paling sederhana

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

Bagi mereka yang memiliki masalah dengan IE dan untuk orang lain juga.

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

Anda juga bisa mencoba ini

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

Anda dapat memasukkan gambar dengan lebar / tinggi = 0 px

Saya bekerja dengan banyak kerangka UI. Banyak dari mereka memiliki kelas bawaan yang dapat Anda gunakan untuk menyembunyikan sesuatu secara visual.

Bootstrap

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

Bahan Sudut

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

Pikiran brilian yang menciptakan kerangka kerja ini telah mendefinisikan gaya-gaya ini sebagai berikut:

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

Saya menambahkannya ke fungsi pada dokumen siap. Jika tidak ada tombol kirim pada formulir (semua Formulir Dialog Jquery saya tidak memiliki tombol kirim), tambahkan.

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

Saya telah menggunakan:

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

dan:

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

dalam file .css. Itu bekerja secara ajaib untuk saya juga. :)