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>


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

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

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

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


4
$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});

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>

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)

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.