在输入按键时避免模态关闭答案

【问题标题】：Avoid modal dismiss on enter keypress在输入按键时避免模态关闭
【发布时间】：2012-05-01 15:40:39
【问题描述】：

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

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

【问题讨论】：

我喜欢这个问题。为什么不直接编辑插件的源代码？
我会研究一下，如果我发现有用的东西我会编辑。同时，我希望有人知道答案。
我从 click.dismiss.modal 改成了 keyup，看起来还不错，我稍后再检查，看看我是否搞砸了其他东西
是的，这搞砸了按钮（我添加了一个 onclick="$('#signinModal').modal('hide');" 以避免这些问题，现在一切都很好，看来)

标签： forms twitter-bootstrap modal-dialog

【解决方案1】：

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

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

在输入字段中按回车键会触发此按钮。我把它改成了一个锚点，它现在按预期工作（输入提交表单并且不关闭模式）。

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

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

【讨论】：

不，没有使用按钮，我使用了项，我猜是别的东西。我使用的代码基本上就是bootstrap页面上的示例代码，只是里面加了一个表单
我没有看到右上角的按钮，这就是问题所在。现在可以正常使用了，谢谢！
+1，很棒的发现！我想知道是否有人将其放入引导程序问题跟踪器中？我现在懒得去查了。也许在午餐后。
这不仅仅是一个按钮问题。我已经从我的模式中删除了所有按钮（包括右上角的“x”），但如果我有一个表单文本字段，按 Enter 将关闭对话框。奇怪的是，只有一个文本字段时才会出现问题。一旦我有两个，无论哪个字段具有焦点，Enter 都不会关闭模型。
可以在取消按钮上使用 type="button"

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

我的所有关闭/取消按钮上已经有type="button"，但是在关闭我的模式时仍然有这个问题。我的模式中只有 1 个输入文本字段，您的解决方案已修复它。感谢您的回答！
这应该是公认的答案。谢谢

【解决方案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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

取消不应该是类型提交

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：