twitter-bootstrap 如何为 Twitter Bootstrap Modals 禁用转义键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16693079/
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
How to disable Escape Key for Twitter Bootstrap Modals?
提问by user1863635
In a shown modal there is a form. If I focus on an input field (any field for that matter) and press ESC key, that modal is hidden. However, if I don't focus on a form field, then pressing ESC key does not close the modal. What's going on?
在显示的模态中有一个表格。如果我专注于输入字段（与此相关的任何字段）并按 ESC 键，则该模式将被隐藏。但是，如果我不关注表单字段，则按 ESC 键不会关闭模式。这是怎么回事？
I want to disable ESC key functionality for the modals altogether. I tried this:
我想完全禁用模态的 ESC 键功能。我试过这个：
$(document).on('keypress', function(e) {
if(e.keyCode == 27) {
e.preventDefault();
return false;
}
}
But this does not affect anything. Is there a way to completely disable ESC key for modals?
但这并不影响任何事情。有没有办法完全禁用模态的 ESC 键？
回答by ptCoder
By adding data-keyboard="false"fixes the problem.
通过添加data-keyboard="false"修复了问题。
Something like this: <div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
像这样的东西： <div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
回答by Ravimallya
Twitter's Bootstrap modal.js (see http://getbootstrap.com/2.3.2/javascript.html#modals) itself has keyboard true or false Boolean. You can avoid escape keypress and click outside the modal using following script:
Twitter 的 Bootstrap modal.js（参见http://getbootstrap.com/2.3.2/javascript.html#modals）本身具有键盘 true 或 false 布尔值。您可以使用以下脚本避免转义按键并在模态外单击：
$(function () {
$('.modal').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
});
working demo :
工作演示：
$(function () {
$('.modal').modal({
show:true,
keyboard: false,
backdrop: 'static'
});
}); <head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>回答by detale
If your modal dialog looks like this
如果您的模态对话框如下所示
<div id="myModal" class="modal hide fade" tabindex="-1" ...>
....
</div>
Removing tabindex="-1"should disable Escape key.
删除tabindex="-1"应该禁用 Escape 键。
回答by Gaurav B
you need
data-keyboard="false"anddata-backdrop="static"
你需要
data-keyboard="false"和data-backdrop="static"
working demo :
工作演示：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</html>回答by Mary Hitchings
Set the keyboard value to false!
将键盘值设置为 false！
Example:
例子：
<a data-controls-modal="myModal"
data-backdrop="static"
data-keyboard="false"
href="#">
OR if you are using JavaScript:
或者，如果您使用的是 JavaScript：
$(function () {
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
}
回答by Anupam M
> keyboard: true Closes the modal when escape key is pressed. > keyboard: false Prevent closing the modal when escape key is pressed
Demo JQuery Code
演示 JQuery 代码
$('#myModal').modal({show: true, keyboard: false});
$('#myModal').modal({show: true, keyboard: false});
回答by Hidden
You can target that specific input by adding an ID to it and simply removing the keydown event for enter like so:
您可以通过向其添加 ID 并简单地删除输入的 keydown 事件来定位该特定输入，如下所示：
JS
JS
$(document).ready(function() {
$('form input').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
This example works with the Enter Key.
此示例适用于 Enter 键。
