【问题标题】:Javascript prompt box without the cancel button?没有取消按钮的Javascript提示框?
【发布时间】:2015-04-24 13:06:56
【问题描述】:

有没有办法创建一个没有取消按钮的输入提示框, 还是在输入某个值之前不允许用户关闭提示?

【问题讨论】:

  • 你为什么不直接模仿提示然后你就可以设计你想要的样式了?
  • 提示框很简单。他们没有任何逻辑。您可以使用一些逻辑创建自己的模态对话框,或者在收到响应后将逻辑应用于提示框响应,如果响应不符合您的条件,则重新显示该框。由于这发生得非常快,您的用户不太可能知道它消失并重新启动。这也使您有机会更改提示中的文本,以显示您对不正确响应的沮丧。但正如其他人指出的那样:您可能应该只构建一个模式对话框来完成您的任务。

标签: javascript jquery prompt


【解决方案1】:

不使用prompt,不。您必须使用现代技术,在页面顶部显示div 或类似名称,并禁用其他地方的点击,并在调用它的代码中允许异步性质。您可以自己滚动,也可以使用任何 许多 库为您执行此操作。搜索“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>

【讨论】:

    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

      将您的 promt 放入一个 while 循环中并继续请求输入,直到用户给出任何输入。

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

      jsFiddle

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

      【讨论】:

      • 可能是因为 OP 要求删除取消按钮
      • OP 也提到了doesn't allow the user to close the prompt until some value is entered
      • @Ashad Shanto,谢谢,删除取消按钮是不可能的,但这可以解决问题。
      • 这只是一种可怕的、可怕的用户体验,而且(正如 Hudixt 指出的那样)并没有按照问题要求做:隐藏“取消”按钮。
      • 我已经提到了这一点。但也说doesn't allow the user to close the prompt until some value is entered。那个怎么样。我只是给了他一个方法。
      猜你喜欢
      • 2011-10-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-07
      • 2018-12-13
      • 2012-12-25
      • 1970-01-01
      相关资源
      最近更新 更多