Bootstrap 避免按下回车键时模式关闭

rpppsulh  于 2023-03-16  发布在  Bootstrap
关注(0)|答案(8)|浏览(247)

我已经建立了一个引导模式,里面有一个表单,我刚刚注意到当我按下回车键时,这个模式被关闭了。有没有办法在按回车键时不关闭它?
我试着用keyboard:false激活模态,但这只能防止用ESC键解除。

3hvapo4f

3hvapo4f1#

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

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

在输入字段中按Enter键导致这个按钮被触发。我把它改成了一个锚,现在它按预期工作了(Enter键提交表单,不关闭模态)。

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

没有看到你的消息来源,我不能确定你的原因是相同的。

iyr7buue

iyr7buue2#

只需在button元素中添加type=“button”属性,一些浏览器默认将该类型解释为submit
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
这适用于模态中的所有按钮。

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

jtjikinw3#

我有这个问题,即使删除所有按钮,从我的引导模式,所以没有解决方案在这里帮助我。
我发现,如果键盘焦点在文本字段上时按Enter键,则只有一个文本字段的表单会导致浏览器提交表单(并导致关闭)。这似乎更多是浏览器/表单的问题,而不是Bootstrap的问题。
我的解决方案是将表单的onsubmit属性设置为onsubmit=“returnfalse”
如果您实际使用submit事件,这可能是一个问题,但我使用的是生成 AJAX 请求的JS框架,而不是浏览器提交,所以我更喜欢完全禁用submit。(这也意味着我不必手动调整每个可能触发submit的表单元素)。
更多信息:Bootstrap modal dialogs with a single text input field always dismiss on Enter key

lg40wkob

lg40wkob4#

我也有同样的问题,我用

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

sauutmhj5#

你可以把登录按钮之前的取消按钮,这将解决问题,你有以及。

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

kse8i1jr6#

刚才我也有过类似的经历,解决的方法是不使用标签,改为type=“button”的标签,这样似乎解决了按“enter”键和解除bootstrap模态的问题。

kzmpq1sx

kzmpq1sx7#

我也遇到过这个问题,我用这种方法解决了它。我在表单中添加了onsubmit。我还希望能够使用enter键作为保存键,所以我在onsubmit中添加了保存_stuff()javascript。return false;用于阻止表单提交。

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

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

wydwbb8l8#

对我来说更简单:提交和取消按钮超出了表单的作用域,在模态上按Enter键可以取消模型,而不是提交它。

相关问题