Unikaj modalnego odrzucania po naciśnięciu klawisza Enter

Skonfigurowałem modal bootstrap z formularzem w środku, właśnie zauważyłem, że kiedy naciskam klawisz Enter, modal zostaje odrzucony. Czy jest sposób, aby nie odrzucić go po naciśnięciu klawisza Enter?

Próbowałem aktywować modal za pomocą klawiatury: false, ale to zapobiega tylko zwolnieniu klawiszem ESC.

Ja też miałem ten problem.
Mój problem polegał na tym, że miałem przycisk zamykający w moim modalu

<button class="close" data-dismiss="modal">&times;</button>

Naciśnięcie Enter w polu wprowadzania spowodowało uruchomienie tego przycisku. Zamiast tego zmieniłem go na kotwicę i teraz działa zgodnie z oczekiwaniami (enter przesyła formularz i nie zamyka modalu).

<a class="close" data-dismiss="modal">&times;</a>

Nie widząc twojego źródła, nie mogę jednak potwierdzić, że twoja sprawa jest taka sama.

Wystarczy dodać atrybut type = "button" do elementu przycisku, niektóre przeglądarki domyślnie interpretują ten typ jako przesłany .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

Dotyczy to wszystkich przycisków, które masz w trybie.

<button type="button" class="close" data-dismiss="modal">×</button>

Miałem ten problem nawet po usunięciu WSZYSTKICH przycisków z mojego Bootstrap Modal, więc żadne z rozwiązań tutaj nie pomogło.

Zauważyłem, że formularz z pojedynczym polem tekstowym spowodowałby wysłanie formularza przez przeglądarkę (i spowodowałoby odrzucenie), jeśli naciśniesz Enter, gdy fokus klawiatury znajduje się na polu tekstowym. Wydaje się, że jest to bardziej problem z przeglądarką / formularzem niż cokolwiek z Bootstrap.

Moim rozwiązaniem było ustawienie atrybutu onsubmit formularza na onsubmit = "return false"

Może to być problem, jeśli faktycznie używasz zdarzenia przesyłania, ale używam struktur JS, które generują żądania AJAX, zamiast wykonywać wysyłanie przez przeglądarkę, więc wolę całkowicie wyłączyć przesyłanie. (Oznacza to również, że nie muszę ręcznie dostosowywać każdego elementu formularza, który może wywołać przesłanie).

Więcej informacji tutaj: Modalne okna dialogowe Bootstrap z pojedynczym polem tekstowym są zawsze odrzucane po naciśnięciu klawisza Enter

Możesz umieścić przycisk logowania przed przyciskiem anulowania, co również rozwiązałoby problem, który masz.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>

Miałem ten sam problem i rozwiązałem go z

<form onsubmit="return false;">

ale jest jeszcze jedno rozwiązanie, możesz dodać fikcyjne niewidoczne dane wejściowe, aby Twój formularz wyglądał tak:

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

Miałem teraz podobne doświadczenie i sposób, w jaki to rozwiązałem, polegał na tym, że zamiast używać tagu, zmieniłem tag na tag z type = "button". Wydawało się, że rozwiązuje to problem związany z naciśnięciem klawisza „enter” i odrzuceniem trybu bootstrap.

Ja też miałem ten problem i rozwiązałem go w ten sposób. Dodałem onsubmit to form. Chciałem również móc użyć klawisza enter jako klucza do zapisywania, więc dodałem javascript save_stuff () do onsubmit. return false; służy do zapobiegania przesłaniu formularza.

<form onsubmit="save_stuff(); return false;">
 ...
</form>

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>