避免在输入按键时出现模态解雇

108

我已经建立了一个带有表单的引导程序模版，我只是注意到当我按Enter键时，该模版被关闭了。是否可以在按Enter时将其关闭？

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

forms twitter-bootstrap modal-dialog

— 卢克·摩根（Luke Morgan）
source

我喜欢这个问题。为什么不只是编辑插件的源代码？

— 瑞安

我会研究一下，如果发现有用的东西，我会进行编辑。同时，我希望有人知道答案。

— 路加·摩根

我从click.dismiss.modal更改为keyup，看起来不错，我稍后再检查是否搞砸了其他东西

— Luke Morgan

是的，这弄糟了按钮（我添加了onclick =“ $（'＃signinModal'）。modal（'hide'）;”以避免这些问题，现在一切都很好，看来）

— 路加·摩根

122

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

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

在输入字段中按Enter键将触发此按钮。我改为将其更改为锚，并且它现在可以按预期运行（输入后将提交表单，并且不会关闭模式）。

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

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

— 愿
source

不，没有使用任何按钮，我使用了<a>项，我想那是另外一回事。我使用的代码基本上是引导页面上的示例代码，只是内部添加了一个表格

— 路加·摩根

我没有在右上角看到按钮，这就是问题所在。现在工作正常，谢谢！

— 路加·摩根

+1，好发现！我想知道是否有人将其放在引导问题跟踪器中？我现在懒得检查。也许在午餐后。

— Andrew

8

这不仅仅是按钮问题。我从模态中删除了所有按钮（包括右上角的“ x”），但是如果我有一个表单文本字段，则按Enter键将关闭该对话框。奇怪的是，只有一个文本字段时，这只是一个问题。一旦有了两个，无论哪个字段具有焦点，Enter都不会关闭模型。

— jpeskin 2013年

11

一个可以在取消按钮上使用type =“ button”

— Muayyad Alsadi

77

只需将type =“ button”属性添加到button元素，某些浏览器默认会将类型解释为Submit。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#Attributes

这适用于模态中的所有按钮。

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

— 卡龙索
source

19

即使从Bootstrap Modal中删除了所有按钮后，我仍然遇到这个问题，因此这里的解决方案都没有帮助我。

我发现，如果在键盘焦点位于文本字段上时按Enter键，则具有单个文本字段的表单将导致浏览器进行表单提交（并导致解雇）。与Bootstrap相比，这似乎更多是浏览器/表单问题。

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

如果您实际上正在使用Submit事件，那么这可能是个问题，但是我使用的是JS框架，该框架会生成AJAX请求，而不是浏览器提交，因此我宁愿完全禁用提交。（这也意味着我不必手动调整可能触发提交的每个表单元素）。

— 耶普斯金
source

2

我已经使用了type="button"所有的关闭/取消按钮，但是仍然存在输入键关闭模态的问题。我的模式中只有1个输入文本字段，您的解决方案将其修复。感谢您的回答！

— 达伦·帕克

7

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

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

— 瑞安
source

6

取消不应键入

— Submit

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>

— 伊戈尔·洛夫里奇（IgorLovrić）
source

3

我现在也有类似的经历，而解决问题的方法是不使用标签，而是将标签更改为type =“ button”的标签。这似乎解决了按下“ enter”键并取消引导程序模版的问题。

— m
source

2

我也遇到了这个问题，我以这种方式解决了。我在表单上添加了onsubmit。我还希望能够将Enter键用作保存键，因此我向onsubmit添加了save_stuff（）javascript。返回false；用于防止表单提交。

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

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

— 费兹
source