Cóż, próbuję przesłać formularz, naciskając klawisz Enter, ale nie wyświetlając przycisku przesyłania. Nie chcę wchodzić w JavaScript, jeśli to możliwe, ponieważ chcę, aby wszystko działało we wszystkich przeglądarkach (jedyny sposób, w jaki znam JS, to zdarzenia).

W tej chwili formularz wygląda następująco:

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

Który działa całkiem dobrze. Przycisk przesyłania działa, gdy użytkownik naciśnie klawisz Enter, a przycisk nie jest wyświetlany w przeglądarkach Firefox, IE, Safari, Opera i Chrome. Jednak nadal nie podoba mi się to rozwiązanie, ponieważ trudno jest wiedzieć, czy będzie działać na wszystkich platformach ze wszystkimi przeglądarkami.

Czy ktoś może zaproponować lepszą metodę? Czy jest to tak dobre, jak to możliwe?

Próbować:

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

Spowoduje to przesunięcie przycisku waaay w lewo, poza ekran. Zaletą tego jest to, że przy wyłączonym CSS można uzyskać płynną degradację.

Aktualizacja - obejście dla IE7

Zgodnie z sugestią Bryana Downinga +, tabindexaby nie dopuścić do przejścia karty do tego przycisku (autor: Ates Goral):

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

Myślę, że powinieneś iść drogą JavaScript, a przynajmniej ja:

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

Próbowałeś tego?

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

Ponieważ większość przeglądarek to rozumie visibility:hiddeni tak naprawdę nie działa display:none, myślę, że powinno być dobrze. Sam tak naprawdę tego nie testowałem, więc CMIIW.

Inne rozwiązanie bez przycisku Prześlij:

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

});

Dla każdego, kto patrzy na tę odpowiedź w przyszłości, HTML5 implementuje nowy atrybut dla elementów formularza hidden, który automatycznie zastosuje się display:nonedo twojego elementu.

na przykład

<input type="submit" hidden />

Użyj następującego kodu, to naprawiło mój problem we wszystkich 3 przeglądarkach (FF, IE i Chrome):

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

Dodaj powyższą linię jako pierwszą linię w kodzie z odpowiednią wartością nazwy i wartości.

Zamiast hacka, którego obecnie używasz do ukrywania przycisku, o wiele łatwiej byłoby ustawić visibility: collapse;atrybut style. Jednak nadal zalecałbym użycie trochę prostego Javascript do przesłania formularza. O ile rozumiem, wsparcie dla takich rzeczy jest obecnie wszechobecne.

Po prostu ustaw ukryty atrybut na 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>

Najbardziej eleganckim sposobem na to jest przytrzymanie przycisku przesyłania, ale ustawienie jego obramowania, wypełnienia i rozmiaru czcionki na 0.

Spowoduje to, że przycisk będzie miał wymiary 0x0.

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

Możesz tego spróbować sam, a ustawiając kontur elementu, zobaczysz kropkę, która jest zewnętrzną ramką „otaczającą” element 0x0 px.

Brak potrzeby widoczności: ukryty, ale jeśli sprawia, że ​​śpisz w nocy, możesz to również wrzucić do miksu.

JS Fiddle

IE nie pozwala na naciśnięcie klawisza ENTER w celu przesłania formularza, jeśli przycisk wysyłania nie jest widoczny, a formularz ma więcej niż jedno pole. Daj mu to, czego chce, zapewniając przezroczysty obraz 1x1 pikseli jako przycisk wysyłania. Oczywiście zajmie to piksel układu, ale spójrz, co musisz zrobić, aby go ukryć.

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

To jest moje rozwiązanie przetestowane w Chrome, Firefox 6 i IE7 +:

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

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

Działa to dobrze i jest to najbardziej jednoznaczna wersja tego, co próbujesz osiągnąć.

Zauważ, że istnieje różnica między display:nonei visibility:hiddendla innych elementów formularza.

Rozwiązanie HTML5

<input type="submit" hidden />

najprostszy sposób

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

Dla tych, którzy mają problemy z IE i dla innych.

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

Możesz także spróbować tego

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

Możesz dołączyć obraz o szerokości / wysokości = 0 px

Pracuję z wieloma frameworkami interfejsu użytkownika. Wiele z nich ma wbudowaną klasę, której można używać do wizualnego ukrywania rzeczy.

Bootstrap

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

Materiał kątowy

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

Genialne umysły, które stworzyły te ramy, zdefiniowały te style w następujący sposób:

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

Dodałem go do funkcji gotowego dokumentu. Jeśli w formularzu nie ma przycisku przesyłania (wszystkie moje formularze dialogu Jquery nie mają przycisków przesyłania), dołącz go.

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

Użyłem:

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

i:

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

w pliku .css. Dla mnie też zadziałało magicznie. :)