112

我已经设置了一个带有表单的引导模式，我只是注意到当我按下 Enter 键时，模式会被关闭。有没有办法在按 Enter 时不关闭它？

我尝试使用键盘激活模式：false，但这只能防止使用 ESC 键解除。

4

7 回答 7

125

我也刚遇到这个问题。
我的问题是我的模态中有一个关闭按钮

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

在输入字段中按 enter 会导致此按钮被触发。我改为将其更改为锚点，它现在按预期工作（输入提交表单并且不关闭模式）。

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

在没有看到您的消息来源的情况下，我无法确认您的原因是相同的。

于 2012-05-01T22:07:54.033 回答
82

只需将type="button"属性添加到按钮元素，一些浏览器默认将类型解释为提交。

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

这适用于您在模式中拥有的所有按钮。

<button type="button" class="close" data-dismiss="modal">×</button>
于 2012-07-21T10:32:16.603 回答
21

即使从我的引导模式中删除所有按钮后我也遇到了这个问题，所以这里的解决方案都没有帮助我。

我发现如果您在键盘焦点位于文本字段上时按 Enter 键，则具有单个文本字段的表单会导致浏览器执行表单提交（并导致关闭）。这似乎更像是浏览器/表单问题，而不是 Bootstrap 的任何问题。

我的解决方案是将表单的 onsubmit 属性设置为 onsubmit="return false"

如果您实际使用提交事件，这可能是一个问题，但我使用的是生成 AJAX 请求而不是浏览器提交的 JS 框架，所以我更喜欢完全禁用提交。（这也意味着我不必手动调整每个可能触发提交的表单元素）。

此处的更多信息：具有单个文本输入字段的引导模式对话框始终在 Enter 键上关闭

于 2013-03-06T20:36:37.780 回答
8

您可以将登录按钮放在取消按钮之前，这也可以解决您遇到的问题。

<div class="modal-footer">
    <button type="submit" class="btn primary">Login</button>
    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
于 2012-05-10T16:08:08.703 回答
8

我有同样的问题，我解决了

<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>
于 2014-08-21T07:53:06.433 回答
3

我刚才也有类似的经历，我解决的方法不是使用标签，而是将标签更改为 type="button" 的标签。这似乎解决了按下“回车”键并关闭引导模式的问题。

于 2014-06-07T05:13:02.810 回答
2

我也有这个问题，我用这种方式解决了。我在表单中添加了 onsubmit。我还希望能够使用回车键作为保存键，所以我在 onsubmit 中添加了 save_stuff() javascript。返回假；用于防止表单提交。

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

<script>
    function save_stuff(){
      //Saving stuff
    }
</script>
于 2014-04-24T11:42:04.453 回答