Вопрос по twitter-bootstrap, forms, modal-dialog – Избегайте модального закрытия при нажатии клавиши Enter

100

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

Я попытался активировать модал с клавиатуры: false, но это только предотвращает увольнение клавишей ESC.

Мне нравится этот вопрос. Почему бы просто не отредактировать исходный код плагина? Ryan
Я перешел с click.dismiss.modal на keyup, кажется, все в порядке, позже я еще раз проверю, не испортил ли я что-то еще Luke Morgan
Я посмотрю на это, если найду что-то полезное, то отредактирую. В то же время, я надеюсь, что кто-то знает ответ. Luke Morgan
Да, это облажалось кнопками (я добавил onclick = & quot; $ ("# signinModal"). Modal ("скрыть"), чтобы избежать этих проблем, теперь все в порядке, кажется) Luke Morgan

Ваш Ответ

7   ответов
3

и я решил, что вместо того, чтобы использовать тег, я изменил тег на тег с type = & quot; button & quot ;. Похоже, это решило проблему нажатия кнопки «Ввод». ключ и отклонение модального бутстрапа.

7

и это решит и вашу проблему.

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
Отмена не должна быть введена
нет это не решает проблему
4

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

strap Modal, поэтому ни одно из решений здесь не помогло мне.

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

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

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

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

У меня уже былоtype="button" на всех моих кнопках закрытия / отмены, но все еще была эта проблема с клавишей ввода, закрывающей мой модальный режим. У меня было только 1 поле ввода текста в моем модале, и ваше решение исправило это. Спасибо за Ваш ответ!
2

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

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

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


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

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

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

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

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

можно использовать type = & quot; button & quot; на кнопку отмены
+1, отличная находка! Интересно, кто-нибудь поместил это в трекер проблем с загрузкой? Сейчас мне лень проверять. Может быть, после обеда.
Нет, кнопки не используются, я использовал & lt; a & gt; предметы, я думаю, это что-то еще. Код, который я использую, в основном представляет собой пример кода на странице начальной загрузки, просто с формой, добавленной внутрь Luke Morgan
Это не просто вопрос кнопки. Я удалил все кнопки из моего модального окна (включая верхний правый «x»), но если у меня есть одно текстовое поле формы, нажатие клавиши Enter приведет к закрытию диалогового окна. Странно, это проблема, только когда имеется одно текстовое поле. Если у меня есть два, Enter не отклоняет модель, независимо от того, какое поле имеет фокус.
Я не видел кнопку в правом верхнем углу, в этом была проблема. Теперь работает нормально, спасибо! Luke Morgan
72

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

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

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

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

Похожие вопросы