Question

有没有办法创建一个没有取消按钮的输入提示框，或者不允许用户关闭提示，直到输入某个值？

Answer 1

将promt置于while循环中，并继续询问输入，直到用户提供任何内容。

do{
    input = prompt("Give input");
}while(input == null || input == "" );

console.log(input);

jsFiddle

[ 注意： 这是满足您的要求的一种方式，我不会建议，因为它可能会惹恼用户。如果您希望用户填写表单，您可以使用正则表达式。]

Answer 2

不使用prompt，不。您必须使用现代技术，在页面顶部显示div或类似的功能，并在其他地方禁用点击，并在调用它的代码中允许其异步性。您可以自己动手，也可以使用任何许多库来执行此操作。搜索“JavaScript模式对话框”以找到大量选择。

以下是使用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>

Answer 3

我非常怀疑您可以编辑浏览器内置警报，提示或确认警报。但是，您可以创建自己的弹出窗口，除非用户输入内容，否则用户无法关闭...但即使这样，用户仍然可以编辑页面的HTML或禁用javascript。如果用户必须在框中输入内容而不能关闭它，则应该包括某种服务器端检查。客户端浏览器中的任何内容都不会真正无法使用。

没有取消按钮的javascript提示框？

3 个答案: