Ben enter tuşuna basarak bir form göndermeye çalışıyorum ama bir gönderme düğmesi görüntülemiyorum. Mümkünse JavaScript'e girmek istemiyorum çünkü her şeyin tüm tarayıcılarda çalışmasını istiyorum (bildiğim tek JS yolu etkinliklerle).

Şu anda form şöyle görünüyor:

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

Hangi oldukça iyi çalışıyor. Gönder düğmesi, kullanıcı enter tuşuna bastığında çalışır ve düğme Firefox, IE, Safari, Opera ve Chrome'da gösterilmez. Ancak, yine de çözümü sevmiyorum çünkü tüm tarayıcılarda tüm platformlarda çalışıp çalışmayacağını bilmek zor.

Herkes daha iyi bir yöntem önerebilir mi? Yoksa bu kadar iyi mi?

Deneyin:

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

Bu, düğmeyi ekranın dışına doğru sola itecektir. Bununla ilgili güzel olan şey, CSS devre dışı bırakıldığında zarif bir bozulma elde etmenizdir.

Güncelleme - IE7 için Geçici Çözüm

tabindexSekmenin bu düğmeye ulaşmasını önlemek için Bryan Downing + ile önerildiği gibi (Ateş Goral tarafından):

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

Javascript yol gitmek gerektiğini düşünüyorum , ya da en azından ben:

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

Bunu denedin mi?

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

Çoğu tarayıcı anladığı visibility:hiddenve gerçekten işe yaramadığı display:noneiçin, bunun iyi olacağını düşünüyorum. Gerçekten kendim test etmedim, bu yüzden CMIIW.

Gönder düğmesi olmayan başka bir çözüm:

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

});

İleride bu yanıta bakan herkes için HTML5, form öğeleri için öğenize hiddenotomatik olarak uygulanacak yeni bir özellik uygular display:none.

Örneğin

<input type="submit" hidden />

Aşağıdaki kodu kullanın, bu tüm 3 tarayıcıda (FF, IE ve Chrome) sorunumu çözdü:

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

Yukarıdaki satırı, uygun ad ve değer değerine sahip kodunuzdaki ilk satır olarak ekleyin.

Şu anda düğmeyi gizlemek için kullandığınız kesmek yerine visibility: collapse;, stil özelliğinde ayarlamak çok daha kolay olurdu . Ancak, yine de formu göndermek için biraz basit Javascript kullanmanızı tavsiye ederim. Anladığım kadarıyla, bu tür şeylere destek bugünlerde her yerde mevcut.

Gizli özelliği true olarak ayarlamanız yeterlidir:

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

Bunu yapmanın en zarif yolu, gönderme düğmesini tutmaktır, ancak kenarlığını, dolgusunu ve yazı tipi boyutunu 0 olarak ayarlamaktır.

Bu, düğme boyutlarını 0x0 yapar.

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

Bunu kendiniz deneyebilirsiniz ve öğeye bir anahat belirleyerek dış sınır 0x0 px öğesini "çevreleyen" bir nokta görürsünüz.

Görünmeye gerek yok: gizli, ancak geceleri uyumanızı sağlarsa, bunu da karışıma atabilirsiniz.

JS Fiddle

IE, gönderme düğmesi görünmüyorsa ve formun birden fazla alanı varsa form gönderme için ENTER tuşuna basmaya izin vermez. Gönder düğmesi olarak 1x1 piksel saydam bir görüntü sağlayarak istediklerini verin. Tabii ki düzenin bir pikselini alacak, ancak gizlemek için ne yapmanız gerektiğine bakın.

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

Bu benim çözümüm, Chrome, Firefox 6 ve IE7 + 'da test edildi:

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

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

Bu iyi çalışıyor ve elde etmeye çalıştığınız şeyin en açık sürümüdür.

Diğer form öğeleri arasında display:noneve visibility:hiddendiğer form öğeleri için bir fark olduğunu unutmayın .

HTML5 çözümü

<input type="submit" hidden />

en basit yol

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

IE ile problemleri olanlar ve diğerleri için.

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

Bunu da deneyebilirsin

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

Genişlik / yükseklik = 0 px olan bir resim ekleyebilirsiniz

Bir sürü UI çerçevesi ile çalışıyorum. Birçoğunda bir şeyleri görsel olarak gizlemek için kullanabileceğiniz yerleşik bir sınıf var.

çizme atkısı

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

Açısal Malzeme

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

Bu çerçeveleri oluşturan parlak beyinler bu stilleri şu şekilde tanımladı:

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

Belgeye hazır bir işleve ekledim. Formda hiçbir gönderme düğmesi yoksa (tüm Jquery İletişim Formlarımın gönderme düğmeleri yoktur), ekleyin.

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

Ben kullandım:

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

ve:

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

.css dosyasında. Benim için de sihirli bir şekilde çalıştı. :)