Избегайте модального увольнения при нажатии клавиши enter

Question

Избегайте модального увольнения при нажатии клавиши enter

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

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

629 7

forms twitter-bootstrap modal-dialog

7 ответов:

Comments

Ничего не найдено.

vish · Accepted Answer · 2012-05-02 01:07:54

у меня тоже была эта проблема.
Моя проблема была в том, что у меня была кнопка закрытия в моем модальном
<button class="close" data-dismiss="modal">&times;</button>
нажатие enter в поле ввода вызвало срабатывание этой кнопки. Вместо этого я изменил его на якорь, и теперь он работает так, как ожидалось (enter отправляет форму и не закрывает модальный).
<a class="close" data-dismiss="modal">&times;</a>
не видя вашего источника, я не могу подтвердить, что ваша причина та же самая.

jcalonso · Accepted Answer · 2016-05-10 22:57:10

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

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

Это относится ко всем кнопкам, которые у вас есть в модальном режиме.
<button type="button" class="close" data-dismiss="modal">×</button>

jpeskin · Accepted Answer · 2017-05-23 15:17:53

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

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

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

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

подробнее здесь: модальные диалоги Bootstrap с одним полем ввода текста всегда отклоняются при вводе ключа

Ryan · Accepted Answer · 2015-06-13 18:01:46

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

Igor Lovrić · Accepted Answer · 2014-08-21 10:53:06

у меня была такая же проблема, и я решил с
<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>

wmock · Accepted Answer · 2014-06-07 08:13:02

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

Firze · Accepted Answer · 2014-04-24 14:42:04

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

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