Избегайте модального увольнения с клавиатуры

Ответ 1

У меня тоже была эта проблема.
Моя проблема заключалась в том, что у меня была кнопка закрытия в моем модальном

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

При нажатии кнопки ввода в поле ввода эта кнопка была запущена. Вместо этого я заменил его на якорь (и теперь он работает как ожидается) (ввод представляет форму и не закрывает модальность).

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

Не видя своего источника, я не могу подтвердить, что ваша причина одинакова.

Ответ 2

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

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

Это относится ко всем кнопкам, которые у вас есть в модальном режиме.

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

Ответ 3

У меня была эта проблема даже после удаления всех кнопок из моего модуля Bootstrap Modal, поэтому ни одно из решений здесь не помогло мне.

Я обнаружил, что форма с одним текстовым полем приведет к тому, что браузер выполнит отправку формы (и приведет к увольнению), если вы нажмете Enter, когда фокус клавиатуры находится в текстовом поле. Это похоже на проблему с браузером/формой, чем с помощью Bootstrap.

Мое решение состояло в том, чтобы установить атрибут onsubmit формы в onsubmit = "return false"

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

Дополнительная информация здесь: Модальные диалоговые окна Bootstrap с одним полем ввода текста всегда отключаются на клавише Enter

Ответ 4

Вы можете поместить кнопку входа в систему до отмены, и это решит проблему, с которой вы столкнулись.

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

Ответ 5

У меня была такая же проблема, и я решил ее с помощью

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

Ответ 6

У меня был подобный опыт только сейчас, и, как я решил, вместо использования тега я сменил тег на тег с типом = "button". Это, казалось, решило проблему нажатия клавиши "enter" и отклонения модальности bootstrap.

Ответ 7

У меня тоже была эта проблема, и я решил это так. Я добавил onsubmit для формирования. Я также хотел иметь возможность использовать ключ ввода в качестве ключа сохранения, поэтому я добавил save_stuff() javascript для onsubmit. return false; используется для предотвращения отправки формы.

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

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