twitter-bootstrap 带有单个文本输入字段的 Bootstrap 模式对话框总是在 Enter 键上关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15239236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal dialogs with a single text input field always dismiss on Enter key
提问by jpeskin
Why does this simple modal dialog with one text field (and NO buttons) dismiss when the focus is on the field and Enter is pressed?
为什么当焦点位于该字段并按下 Enter 时，这个带有一个文本字段（和没有按钮）的简单模式对话框会关闭？
<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a>
<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true">
<div class="modal-header">
<!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>-->
<h3 id="myModalLabel">Add Device Folder</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label>
<div class="controls">
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>-->
<!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>-->
</div>
</div>
There is extensive discussion herethat suggests it is a button issue (I have put type="button" on button and anchor tags. I have converted button tags to anchors). However, I tried all solutions proposed and then ended up just completely commenting out the buttons, and it still happens.
有广泛的讨论在这里是表明它是一个按钮的问题（我有按钮和锚标记放式=“按钮”。我已经转换按钮标签锚）。但是，我尝试了所有提出的解决方案，然后最终完全注释掉了按钮，但它仍然发生。
Note that if you simply duplicate the same text input and have two fields, the problem goes away (focusing on either text field will not cause dismissal on Enter)
请注意，如果您只是复制相同的文本输入并有两个字段，问题就会消失（专注于任一文本字段不会导致在 Enter 时被解雇）
回答by jpeskin
Thanks to @mccannf for pointing me in the right direction. This seems to be a more general form submit issue than anything specific to Bootstrap. Two solutions:
感谢@mccannf 为我指明了正确的方向。这似乎是一个比 Bootstrap 特定的更一般的表单提交问题。两种解决方案：
1. Set the form's onsubmit attribute to onsubmit="return false;"(https://stackoverflow.com/a/1329168/569091)
1. 将表单的 onsubmit 属性设置为 onsubmit="return false;" ( https://stackoverflow.com/a/1329168/569091)
I like this solution the best as it seems hard to predict (and is perhaps browser dependent) which form fields may or may not trigger a form submit on typing Enter.
我最喜欢这个解决方案，因为它似乎很难预测（并且可能取决于浏览器）哪些表单字段可能会或可能不会在键入 Enter 时触发表单提交。
So, in my example from the original Question:
因此，在我来自原始问题的示例中：
<form class="form-horizontal" onsubmit="return false">
2. Set the onkeydown (or onkeyup?) attribute to return false when event.keyCode == 13(https://stackoverflow.com/a/2037935/569091) In this link, onkeyup worked, but I had to use onkeydown (browser dependent?)
2.当 event.keyCode == 13( https://stackoverflow.com/a/2037935/569091) 在这个链接中，onkeyup 工作，但我不得不使用 onkeydown (依赖浏览器？）
So, in my example from the original Question:
因此，在我来自原始问题的示例中：
function ignoreEnter(event)
{
if (event.keyCode == 13) {
return false;
}
}
// and this in the HTML
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);">
回答by Mara Jimenez
Its just to clarify the answer before and to respond to the raykin comment.
只是为了澄清之前的答案并回应raykin的评论。
1. Set the form's onsubmit attribute to onsubmit="return false;"(https://stackoverflow.com/a/1329168/569091)
1. 将表单的 onsubmit 属性设置为 onsubmit="return false;" ( https://stackoverflow.com/a/1329168/569091)
This solution is helpful when you control the submit of the form by javascript as an example
当您通过 javascript 控制表单提交时，此解决方案很有用
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">{% trans "Create" %}</h3>
</div>
<div class="modal-body">
<form method="POST" class="form-horizontal" onsubmit="return false">
<input id="id_name" maxlength="250" name="name" type="text">
</form>
</div>
<div class="modal-footer">
<button id="save-button" class="btn">{% trans "Save" %}</button>
<button class="btn" aria-hidden="true">{% trans "Cancel" %}</button>
</div>
</div>
<script>
$('#save-button').on('click', function(){
// TODO add ajax call
});
</script>
As you can see to do a form submit is through the jquery call onclick of the button save id.
正如您所看到的，表单提交是通过按钮保存 id 的 jquery 调用 onclick 进行的。
But if you want to add action to form tag, then you maybe have to use the second solution
但是如果你想为表单标签添加动作，那么你可能不得不使用第二种解决方案
2. Set the onkeydown (or onkeyup?) attribute to return false when event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091)
2. 设置 onkeydown（或 onkeyup？）属性在 event.keyCode == 13 时返回 false ( https://stackoverflow.com/a/2037935/569091)
In my opinion, I dont like this solution in case you want to build the form dinamically.
在我看来，如果您想以动态方式构建表单，我不喜欢这个解决方案。
回答by Igor Lovri?
Just a comment to Mara Jimenez post:
只是对 Mara Jimenez 帖子的评论：
There is another way to use action tag, and not to play around with events. You can add dummy invisible input in form, and Enter key would not submit it. Here is sample:
还有另一种使用动作标签的方法，而不是玩弄事件。可以在表单中添加虚拟的隐形输入，回车键不会提交。这是示例：
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
