Wprowadzanie klawisza Enter w wysyłaniu formularza HTML zamiast aktywowania przycisku

81

Mam formularz HTML z jednym submitwejściem, ale także różnymi buttonelementami. Gdy użytkownik naciśnie klawisz „enter”, spodziewałbym się, że faktycznie prześle formularz, ale zamiast tego (przynajmniej w przeglądarce Chrome 15) stwierdzam, że uruchamia pierwszy button(ponieważ występuje to wcześniej w kodzie HTML niż dane submitwejściowe , Zgaduję).

Wiem, że generalnie nie można zmusić przeglądarek do faworyzowania określonego submitwejścia, ale naprawdę sądziłem, że będą preferować submitdane wejściowe nad buttonelementami. Czy mogę wprowadzić jakieś drobne poprawki w kodzie HTML, aby to zadziałało, czy też będę musiał zastosować jakieś podejście do języka JavaScript?

Oto przybliżona makieta kodu HTML:

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>
andygeers
źródło
Sprawdź to pytanie: stackoverflow.com/a/925387/1031900
Ofir Farchy
1
@OfirFarchy Myślę, że to, co pomyślałem, sprawiło, że to pytanie było inne, to fakt, że jest tylko JEDEN przesyłanie, pozostałe są przyciskami.
andygeers
Dobrze, jeśli nie sprzeciwiają się za pomocą JS i jQuery sprawdzasz & Dawida odpowiedzi
Ofir Farchy

Odpowiedzi:

143

Nie potrzebujesz JavaScript, aby wybrać domyślny przycisk lub wejście przesyłania. Wystarczy oznaczyć go type="submit", a pozostałe przyciski oznaczyć je type="button". W twoim przykładzie:

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
Jesús Carrera
źródło
4
To faktycznie nie działa zgodnie z oczekiwaniami w niektórych przeglądarkach. Właśnie dzisiaj natknąłem się na ten problem, myśląc, że typ = "submit" sprawiłby, że byłby domyślny, jednak nie ma go w Chrome ani Safari.
Ben Davis,
5
U mnie działa w Chrome i Safari. To musi być coś innego.
Jesús Carrera
15
Ustawienie type = "button" na dodatkowych przyciskach ORAZ ustawienie type = "Submit" jest tym, co robi różnicę.
Alex
21
Przyczyną tego, że nie działa, jeśli nie ustawisz, type="button"jest to, że domyślnie elementy przycisków są type="submit". Tak więc założenie w pytaniu, że był tylko jeden przycisk przesyłania, było w rzeczywistości błędne.
Elezar
30

Możesz użyć jQuery:

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});
Ofir Farchy
źródło
14
Ponieważ jest to akceptowana odpowiedź: Przewiń w dół, aby znaleźć bardzo proste rozwiązanie zawierające tylko HTML.
jlh
2
Rozwiązanie HTML to poprawna odpowiedź. Przeglądarka obsługuje domyślnie
Edward Newsome
Wiem, że to stara odpowiedź, ale nie musisz używać tego „ciężkiego sprzętu”, aby rozwiązać ten problem. Użyj tylko rozwiązania HTML (odpowiedź @ Jesús Carrera), przeglądarka obsługuje to teraz.
Martijn Luyckx
1
Zaletą tego podejścia - chociaż tak, wymaga jQuery / JavaScript - jest to, że będzie działać, nawet jeśli potrzebujesz mieć wiele przycisków przesyłania w swoim formularzu. Konkretny selektor w tym przykładzie nie powinien mieć spacji po button[type=submit]znaku, zakładając, że oznaczyłeś swój domyślny przycisk defaultwysyłania klasą css.
Christopher King
4

Spróbuj tego, jeśli został naciśnięty klawisz Enter, możesz to uchwycić w ten sposób, na przykład opracowałem odpowiedź na drugi dzień przycisk html określ wybrany , zobacz, czy to pomaga.

Podaj nazwę formularza, na przykład yourFormNamewtedy powinieneś móc przesłać formularz bez koncentrowania się na formularzu.

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}
david
źródło
jeśli formularz ma więcej przycisków przesyłania, pomoże to: <input type = "submit" id = "submit" value = "ok" /> document.getElementById ("submit"). click ();
Muflix,
Jest to tępy sposób obejścia domyślnego zachowania w HTML. Zobacz powyższą odpowiedź, dlaczego.
alttag
4

Właśnie mam z tym problem. Mój był spadek po zmianie na inputa buttoni miałem źle napisany />terminator tagu:

Więc miałem:

<button name="submit_login" type="submit" class="login" />Login</button>

I właśnie zmieniłem to na:

<button name="submit_login" type="submit" class="login">Login</button>

Teraz działa jak urok, zawsze irytujące małe rzeczy ... HTH

Mike Wells
źródło
4
$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});
samehanwar
źródło
2

Biorąc pod uwagę, że istnieje tylko jeden (lub w przypadku tego rozwiązania potencjalnie nawet nie jeden) przycisk przesyłania, oto rozwiązanie oparte na jQuery, które będzie działać dla wielu formularzy na tej samej stronie ...

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>
Darren
źródło
1

Właśnie dałem temu wir w Chrome i Firefoxie i IE10.

Jak wspomniano powyżej - upewnij się, że zaznaczyłeś typ = "przycisk", "reset", "wyślij" itp., Aby upewnić się, że poprawnie kaskaduje i wybiera właściwy przycisk.

Być może ustawienie wszystkich z nich tak, aby miały tę samą formę (tj. Wszystkie, które działały dla mnie)

Flanamacca
źródło