Przesłanie formularza przez naciśnięcie enter bez przycisku wysyłania

322

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?

abatishchev
źródło
7
Mały punkt, który może ogolić kilka znaków z twojego CSS i zwykle będzie wykonywany automatycznie, to minifikatory - nie potrzebujesz jednostek do pomiarów zerowej długości. 0px = 0pt = 0em = 0em itd.
pwdst
@pwdst dziękuję za zwrócenie na to uwagi - jestem ze świata Python, więc „jawne jest lepsze niż niejawne” i naprawdę zastanawiam się, czy tak jest w CSS, czy też twórcy CSS mają inny idiom?
ericmjl,
2
Zero jest wyjątkiem od reguły tutaj @ericmjl - 0px == 0em == 0% == 0vh == 0vh itp. W innych (niezerowych) pomiarach długości jest to nie tylko zła praktyka, ale wbrew standardom nie określa się jednostek i zobaczysz różne zachowania w aplikacjach użytkownika (przeglądarkach). Zobacz developer.mozilla.org/en-US/docs/Web/CSS/length and drafts.csswg.org/css-values-3/#lengths
pwdst
2
W razie wątpliwości należy podać jednoznaczną jednostkę długości.
pwdst
3
Chociaż z pewnością nie zaszkodzi dodać jednostkę z 0, brak jej powinien być w 100% poprawny niezależnie od języka, w rzeczywistości aż do matematycznych abstrakcji. OTOH, przydatnym zastosowaniem posiadania kontra nie posiadania ich jest przekazanie komunikatu, czy dana właściwość „naprawdę ma być równa 0 i pozostanie w tym stanie” (bez jednostki), w porównaniu z „ta rzecz jest teraz równa zero, ale może być dostosowane do smaku; lub cokolwiek ... ”(z jednostką).
Sz.

Odpowiedzi:

237

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" />
Ates Goral
źródło
9
Właśnie wypróbowałem to rozwiązanie w IE7 z takim samym rezultatem jak Erebus. Następujący kod to naprawia:position: absolute; width: 1px; height: 1px; left: -9999px;
Bryan Downing
84
Jaki straszny Hack :( dlaczego jest HTML tak na pierwszym miejscu Czy istnieje dobry powód, aby nie wprowadzić do pracy w tym przypadku?
nornagon
28
@nornagon: Jeśli uważasz, że ten hack jest okropny, możesz zaproponować mniej okropny. HTML jest tym, czym jest ...
Ates Goral,
13
@MooseFactorytabindex="-1"
Ates Goral
14
„miłą rzeczą jest… pełna gracji degradacja, gdy CSS jest wyłączony” ?! Mam na myśli, że to działa świetnie, ale część „wdzięcznej degradacji” to tylko taktyki marketingowe. Nawet o tym nie słyszałem, dopóki nie znalazłem tej strony z 2002 roku . Zgadza się, jedyny wynik Google na pierwszej stronie dla „css jest wyłączony w przeglądarce” pochodzi z 10 lat temu (lub 7, biorąc pod uwagę, że odpowiedź została opublikowana w 2009 roku).
Vicky Chijwani,
97

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>
strager
źródło
6
fajny, przetestowany i działa dobrze. Ale zanim spróbujesz czegoś takiego, pamiętaj, że przesłanie formularza przez JavaScript nie spowoduje, że niektóre przeglądarki będą oferować funkcje oszczędzania hasła.
andyk
3
Spowoduje to, że przycisk przesyłania pojawi się na chwilę (do momentu załadowania strony i uruchomienia JS).
nornagon,
15
Naciśnięcie klawisza jest również uruchamiane dla wyboru z autouzupełniania, tj. Jeśli użytkownik wprowadza adres e-mail, a on / ona wybiera poprzednio podany z autouzupełniania przeglądarki, naciskając Enter, wówczas formularz zostanie przesłany. Nie tego oczekują Twoi użytkownicy.
cburgmer
2
Zmieniłem na keydownz, aby keypressuzyskać szersze wsparcie, ale musisz również dodać e.preventDefault();przed, ifjeśli masz nadzieję na obsługę Chrome.
Campbeln,
1
@Campbeln .on('keypress'...)zamiast tego możesz użyć . Dokumenty .on()wyglądają tak, jakby .preventDefault()zadzwoniły do ​​Ciebie.
jinglesthula,
79

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.

andyk
źródło
3
jest tylko jedna rzecz visibility: hidden: jak można przeczytać w w3schools , visibity: żadna nie wpływa na układ. Jeśli chcesz uniknąć tego spacji, rozwiązanie z absolutnym pozycjonowaniem wydaje mi się lepsze.
loybert
8
Możesz połączyć oba rozwiązania:<input type="submit" style="visibility: hidden; position: absolute;" />
VaclavSir,
2
Cholera, to nie działa w IE8 (nie przesyła formularza), więc rozwiązanie z powyższego wygrywa:position: absolute; left: -100px; width: 1px; height: 1px;
VaclavSir
31

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

});
damoiser
źródło
1
Dziwna sztuczka. Że zmienisz swój przycisk w pole tekstowe! Ale ponieważ sztuczka działa we wszystkich przeglądarkach, podziękowałem ci!
Jenna Leaf
dzięki @JennaLeaf ;-) W każdym razie myślę, że to nie jest takie dziwne - wiele formularzy online używa jako przesłania po prostu „wyzwalanie” keydown. Przykładem może być pasek wyszukiwania Google (być może nie używają dokładnie tego kodu, ale prawdopodobnie coś podobnego).
damoiser
16

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 />
Panomosh
źródło
Wygląda na to, że działa z Chrome na komputer, ale nie działa z Chrome ani Safari na iPhonie.
Ulf Adams,
@UlfAdams Działa z Chrome i Safari na iPhonie 12.1.2.
Matthew Campbell
13

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.

Mayank Gupta
źródło
7

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.

Noldorin
źródło
7

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>
jumpnett
źródło
4
Ukryty atrybut wyłączy przesyłanie, naciskając enter.
66Ton99
@ 66Ton99 Wystarczy przetestować w FF. Nie wyłącza przesyłania
Eugen Konkov
1
„działa na moim komputerze”;) jest o wiele więcej przeglądarek niż Firefox. można prawdopodobnie chcieć rozwiązania, które działa niezawodnie w różnych przeglądarkach.
Félix Gagnon-Grenier
Działa na Chrome 63
piotr_cz
Obecnie nie działa w Chrome ani Safari na iPhonie.
Ulf Adams,
7

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

Waltur Buerk
źródło
5

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"/>
Winston Tamblyn
źródło
4

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

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
vjnrv
źródło
Wygląda na to, że IE8 nie lubi pozycji: absolutna, nie poddaje się.
maxxyme
4
<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.

Shammoo
źródło
4

Rozwiązanie HTML5

<input type="submit" hidden />
Andrew Luca
źródło
To samo co powyżej - nie działa z Chrome ani Safari na iPhonie.
Ulf Adams,
3

najprostszy sposób

<input type="submit" style="width:0px; height:0px; opacity:0;"/>
Shahin Mammadzada
źródło
2

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

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
Jekis
źródło
Nadal używałbym pozycji: absolutna, zmiennoprzecinkowa wpływa na układ.
SuperDuck
Wygląda na to, że IE8 nie lubi pozycji: absolutna, nie poddaje się. Używam:
maxxyme
To samo dotyczy float: left;, gdy zostanie usunięty, przesyła.
maxxyme
2

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

leci
źródło
1
WAŻNE: MUSISZ użyć poprawnego adresu URL obrazu, w przeciwnym razie Firefox wyświetli na stronie tekst „Prześlij zapytanie”
PH.
2
Jeśli dodasz istniejący obraz i ustawisz wysokość i szerokość na zero lub dodasz nieistniejący obraz, przeglądarka będzie musiała wysłać zmarnowane żądanie GET dla zasobu.
pwdst
2

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;
}
H Dog
źródło
1

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);
    });
}
seePatCode
źródło
0
input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});
Marty
źródło
-2

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

Mihai Savin
źródło