Уникайте модального відхилення при натисканні клавіші enter

Я встановив модуль завантаження з формою всередині нього, я щойно помітив, що при натисканні клавіші Enter модаль відхиляється. Чи є спосіб не відпустити його під час натискання клавіші Enter?

Я спробував активувати модаль з клавіатури: false, але це лише запобігає звільненню за допомогою клавіші ESC.

У мене теж була ця проблема.
Моя проблема полягала в тому, що у мене в модалі була кнопка закриття

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

Натискання клавіші Enter у полі введення призвело до запуску цієї кнопки. Я замінив його на якір, і він працює так, як очікувалося зараз (Enter надсилає форму і не закриває модальний режим).

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

Не бачивши вашого джерела, я не можу підтвердити, що ваша причина однакова.

Просто додайте атрибут type = "button" до елемента кнопки, деякі браузери інтерпретують тип як подати за замовчуванням.

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

Це стосується всіх кнопок, які у вас є в модалі.

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

У мене була ця проблема навіть після видалення ВСІХ кнопок з мого Bootstrap Modal, тому жодне з рішень тут мені не допомогло.

Я виявив, що форма з одним текстовим полем призведе до того, що браузер може надсилати форму (і призведе до її відхилення), якщо натиснути Enter, коли фокус клавіатури знаходиться на текстовому полі. Це, здається, більше стосується браузера / форми, ніж будь-що з Bootstrap.

Моїм рішенням було встановити атрибут форми onsubmit для onsubmit = "return false"

Це може бути проблемою, якщо ви насправді використовуєте подію подання, але я використовую рамки JS, які генерують запити AJAX, а не роблять браузер надсилати, тому я вважаю за краще відключити подання повністю. (Це також означає, що мені не потрібно вручну переробляти кожен елемент форми, який може викликати подання).

Більше інформації тут: Модальні діалогові вікна завантаження з одним полем для введення тексту завжди відміняють клавішу Enter

Ви можете поставити кнопку входу перед кнопкою скасування, і це також вирішить проблему, яка виникає.

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

У мене була така ж проблема, і я вирішив її

<form onsubmit="return false;">

але є ще одне рішення, ви можете додати манекен-невидимий ввід, щоб ваша форма виглядала так:

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

У мене був подібний досвід саме зараз, і те, як я вирішив це, замість того, щоб використовувати тег, я змінив тег на тег з type = "button". Це, здавалося, вирішило проблему натискання клавіші "enter" та відхилення модального завантаження.

У мене теж була ця проблема, і я вирішив її таким чином. Я додав підписку до форми. Я також хотів використовувати ключ введення як ключ збереження, тому я додав JavaScript save_stuff () до підключення. повернути помилкове; використовується для запобігання надсилання форми.

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

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