Mengirimkan formulir dengan menekan enter tanpa tombol kirim


322

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?


7
Titik kecil yang mungkin mencukur beberapa karakter dari CSS Anda dan biasanya akan dilakukan secara otomatis menjadi minifiers - Anda tidak perlu unit untuk pengukuran panjang nol. 0px = 0pt = 0em = 0em dll.
pwdst

@ pwdst terima kasih untuk menunjukkan ini - saya dari dunia Python, jadi "eksplisit lebih baik daripada implisit", dan benar-benar bertanya-tanya apakah ini yang terjadi dalam CSS, atau apakah pembuat CSS memiliki idiom yang berbeda?
ericmjl

2
Nol adalah pengecualian dari aturan di sini @ericmjl - 0px == 0em == 0% == 0vh == 0vh dll. Dalam pengukuran panjang lainnya (bukan-nol) tidak hanya praktik yang buruk tetapi juga terhadap standar untuk tidak menentukan unit dan Anda akan melihat berbagai perilaku di agen pengguna (browser). Lihat developer.mozilla.org/en-US/docs/Web/CSS/length and drafts.csswg.org/css-values-3/#lengths
pwdst

2
Jika ragu, masukkan satuan panjang eksplisit dengan kata lain.
pwdst

3
Meskipun tidak ada salahnya menambahkan unit dengan 0, tidak memiliki apapun harus 100% valid terlepas dari bahasa, pada kenyataannya semua jalan kembali ke abstraksi matematika. OTOH, penggunaan praktis memiliki vs tidak memiliki mereka adalah untuk menyampaikan pesan apakah properti yang diberikan "benar-benar dimaksudkan menjadi 0, dan tetap seperti itu" (tidak ada unit), vs "benda itu kebetulan nol sekarang, tetapi mungkin disesuaikan dengan selera; atau apa pun ... "(dengan unit).
Sz.

Jawaban:


237

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

9
Baru saja mencoba solusi ini di IE7 dengan hasil yang sama dengan Erebus. Kode berikut memperbaikinya:position: absolute; width: 1px; height: 1px; left: -9999px;
Bryan Downing

84
Apa hack mengerikan :( mengapa HTML seperti ini di tempat pertama? Apakah ada alasan yang baik untuk masuk tidak bekerja dalam kasus ini?
nornagon

28
@nagonagon: Jika Anda merasa retasan ini mengerikan, jangan ragu untuk menyarankan hack yang kurang mengerikan. HTML itu apa adanya ...
Ates Goral

13
@ MooseFactorytabindex="-1"
Ates Goral

14
"Yang menyenangkan adalah ... degradasi yang anggun ketika CSS dinonaktifkan" ?! Maksud saya yakin, ini bekerja dengan baik, tetapi bagian "penurunan anggun" hanyalah taktik pemasaran. Saya bahkan belum pernah mendengarnya sampai saya menemukan halaman ini dari tahun 2002 . Itu benar, satu - satunya hasil Google di halaman pertama untuk "css dinonaktifkan di browser" adalah dari 10 tahun yang lalu (atau 7 mengingat jawaban ini diajukan pada 2009).
Vicky Chijwani

97

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>

6
bagus, teruji dan bekerja dengan baik. Tetapi sebelum mencoba sesuatu seperti ini, ingat bahwa mengirimkan formulir melalui Javascript tidak akan menyebabkan beberapa browser menawarkan hal-hal yang menghemat kata sandi.
andyk

3
Ini akan menyebabkan tombol kirim muncul sebentar (sampai halaman dimuat dan JS berjalan).
nornagon

15
Sebuah penekanan tombol juga dipicu untuk pemilihan dari autocomplete, yaitu jika pengguna memasukkan alamat email dan dia memilih yang sebelumnya diberikan dari autocomplete browser dengan menekan enter, maka formulir Anda akan mengirimkan. Bukan yang diharapkan pengguna Anda.
cburgmer

2
Saya beralih ke keydowndari keypressuntuk dukungan yang lebih luas, tetapi Anda juga perlu menambahkan e.preventDefault();sebelum ifjika Anda berharap untuk mendukung Chrome.
Campbeln

1
@ Campbeln yang mungkin bisa Anda gunakan .on('keypress'...). Docs untuk .on()terlihat seperti .preventDefault()panggilan untuk Anda.
jinglesthula

79

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.


3
hanya ada satu hal tentang visibility: hidden: seperti yang dapat Anda baca di w3schools , visibity: tidak ada yang mempengaruhi tata letak. Jika Anda ingin menghindari ruang kosong ini, solusi dengan penentuan posisi absolut tampaknya lebih baik bagi saya.
loybert

8
Anda dapat menggabungkan kedua solusi:<input type="submit" style="visibility: hidden; position: absolute;" />
VaclavSir

2
Sial, ini tidak berfungsi di IE8 (tidak mengirimkan formulir), jadi solusi dari menang:position: absolute; left: -100px; width: 1px; height: 1px;
VaclavSir

31

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

});

1
Trik aneh. Bahwa Anda membuat tombol Anda menjadi kotak teks! Tetapi karena trik ini bekerja untuk semua browser, saya telah memberi Anda kredit!
Jenna Leaf

terima kasih @JennaLeaf ;-) Pokoknya saya pikir itu tidak begitu aneh - banyak formulir online menggunakan hanya sebagai "pemicu" dari keydown. Contohnya adalah bilah pencarian google (mungkin mereka tidak menggunakan persis kode ini, tetapi mungkin sesuatu yang serupa).
damoiser

16

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

Meskipun tampaknya berfungsi dengan Chrome desktop, tampaknya tidak berfungsi dengan Chrome atau Safari di iPhone.
Ulf Adams

@UlfAdams Berhasil dengan Chrome dan Safari di iPhone 12.1.2.
Matius Campbell

13

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.


7

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.


7

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>

4
Atribut tersembunyi akan menonaktifkan pengiriman dengan menekan enter.
66Ton99

@ 66Ton99 Cukup uji FF. Itu tidak menonaktifkan submittion
Eugen Konkov

1
"Ini bekerja pada mesin saya";) ada lebih banyak browser daripada firefox. orang bisa dibilang menginginkan solusi yang berfungsi andal lintas-browser.
Félix Gagnon-Grenier

Bekerja di Chrome 63
piotr_cz

Tidak berfungsi di Chrome atau Safari di iPhone saat ini.
Ulf Adams

7

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


5

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

4

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

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

Sepertinya IE8 tidak suka posisi: absolut, tidak mengirimkan.
Maksimal

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


4

Solusi HTML5

<input type="submit" hidden />

Sama seperti di atas - tidak berfungsi dengan Chrome atau Safari di iPhone.
Ulf Adams


2

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

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

Saya masih menggunakan posisi: absolut, float mempengaruhi tata letak.
SuperDuck

Sepertinya IE8 tidak suka posisi: absolut, tidak mengirimkan. Saya menggunakan:
maxxyme

Sama untuk float: left;, ketika dihapus, itu tunduk.
Maksimal

2

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


1
PENTING: Anda HARUS menggunakan URL gambar yang valid atau Firefox akan menampilkan teks "Kirim Pertanyaan" di halaman Anda
PH.

2
Jika Anda menambahkan gambar yang ada dan mengatur tinggi dan lebar menjadi nol, atau menambahkan gambar yang tidak ada maka browser harus membuat permintaan GET yang terbuang untuk sumber daya.
pwdst

2

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

1

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

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

-2

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. :)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.