Question

我已经设置了一个带有表单的bootstrap模式，我只是注意到当我按下Enter键时，模态被取消了。按Enter键有没有办法不解雇它？

我尝试用键盘激活模态：false，但这只能阻止使用ESC键解雇。

Answer 1

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

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

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

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

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

Answer 2

只需将 type =“button”属性添加到按钮元素，默认情况下，某些浏览器会将该类型解释为提交。

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

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

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

Answer 3

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

我发现只有键盘焦点位于文本字段时，如果您按Enter键，则具有单个文本字段的表单将导致浏览器执行表单提交（并导致解除）。这似乎比使用Bootstrap的任何东西更像浏览器/表单问题。

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

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

此处有更多信息：Bootstrap modal dialogs with a single text input field always dismiss on Enter key

Answer 4

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

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

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

Answer 6

我刚才有过类似的体验，我解决它的方式不是使用标签，而是将标签更改为类型=＆＃34;按钮＆＃34;的标签。这似乎解决了按下＆＃34;输入＆＃34;键和解雇bootstrap模式。

Answer 7

我也有这个问题，我这样解决了。我添加了提交表单。我还希望能够使用enter键作为保存键，因此我将save_stuff（）javascript添加到onsubmit。返回false;用于阻止表单提交。

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

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

输入按键时避免模态解除

7 个答案: