Javascript 没有取消按钮的提示框?
Javascript prompt box without the cancel button?
有没有办法制作一个没有取消按钮的输入提示框,
或者在输入某些值之前不允许用户关闭提示?
没有使用 prompt
,没有。您必须使用现代技术,在页面顶部显示 div
或类似内容,并在其他地方禁用点击,并在调用它的代码中考虑异步特性。您可以自己滚动,也可以使用任何 many 库中的任何一个为您完成。搜索 "JavaScript modal dialog" 以找到大量选择。
这是一个使用 Bootstrap 的示例,但这只是 众多 可用选项之一:
$("#the-modal")
.on("show.bs.modal", function() {
// When the modal is about to be shown, clear the field
$(this).find(".field").val("");
$(this).find(".btn-primary").prop("disabled", true);
})
.on("shown.bs.modal", function() {
// When the modal has been shown, focus the field
$(this).find(".field").focus();
})
.on("hide.bs.modal", function() {
// When the modal is closed, display the field's value
display("Done, entered value: " + $(this).find("input").val());
})
.find(".field").on("keypress input paste change", function() {
// When the field's value changes in any way, enable/disable
// the 'Save Changes' button
$("#the-modal .btn-primary").prop(
"disabled",
$.trim($(this).val()).length == 0
);
});
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<input type="button" value="Click me" data-toggle="modal" data-target="#the-modal">
<div id="the-modal" class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<label>Please provide the info:
<input type="text" class="form-control field">
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" disabled>Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
我非常怀疑您是否可以编辑浏览器的内置警报、提示或确认警报。但是,您可以创建自己的弹出窗口,除非用户输入某些内容,否则用户无法关闭...但即使这样,用户仍然可以编辑页面的 HTML 或禁用 [=13=]。如果用户必须在框中输入内容而不能关闭它,那么您应该包括某种服务器端检查。客户端浏览器中的任何内容永远不会真正关闭。
将您的 promt
置于 while 循环中并继续请求输入,直到用户给出任何输入。
do{
input = prompt("Give input");
}while(input == null || input == "" );
console.log(input);
[注意: 这是满足您要求的一种方式,我不会建议,因为它可能会惹恼用户。如果您希望用户填写您的表单,您可以使用正则表达式。]
有没有办法制作一个没有取消按钮的输入提示框, 或者在输入某些值之前不允许用户关闭提示?
没有使用 prompt
,没有。您必须使用现代技术,在页面顶部显示 div
或类似内容,并在其他地方禁用点击,并在调用它的代码中考虑异步特性。您可以自己滚动,也可以使用任何 many 库中的任何一个为您完成。搜索 "JavaScript modal dialog" 以找到大量选择。
这是一个使用 Bootstrap 的示例,但这只是 众多 可用选项之一:
$("#the-modal")
.on("show.bs.modal", function() {
// When the modal is about to be shown, clear the field
$(this).find(".field").val("");
$(this).find(".btn-primary").prop("disabled", true);
})
.on("shown.bs.modal", function() {
// When the modal has been shown, focus the field
$(this).find(".field").focus();
})
.on("hide.bs.modal", function() {
// When the modal is closed, display the field's value
display("Done, entered value: " + $(this).find("input").val());
})
.find(".field").on("keypress input paste change", function() {
// When the field's value changes in any way, enable/disable
// the 'Save Changes' button
$("#the-modal .btn-primary").prop(
"disabled",
$.trim($(this).val()).length == 0
);
});
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<input type="button" value="Click me" data-toggle="modal" data-target="#the-modal">
<div id="the-modal" class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<label>Please provide the info:
<input type="text" class="form-control field">
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" disabled>Save Changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
我非常怀疑您是否可以编辑浏览器的内置警报、提示或确认警报。但是,您可以创建自己的弹出窗口,除非用户输入某些内容,否则用户无法关闭...但即使这样,用户仍然可以编辑页面的 HTML 或禁用 [=13=]。如果用户必须在框中输入内容而不能关闭它,那么您应该包括某种服务器端检查。客户端浏览器中的任何内容永远不会真正关闭。
将您的 promt
置于 while 循环中并继续请求输入,直到用户给出任何输入。
do{
input = prompt("Give input");
}while(input == null || input == "" );
console.log(input);
[注意: 这是满足您要求的一种方式,我不会建议,因为它可能会惹恼用户。如果您希望用户填写您的表单,您可以使用正则表达式。]