【问题标题】：JQuery Close Modal After Inactivity不活动后 JQuery 关闭模式
【发布时间】：2018-04-24 18:34:29
【问题描述】：

我正在创建一个触摸屏反馈信息亭，在用户选择反馈选项（好/坏）后提示他们输入他们的电子邮件地址。

留下他们的电子邮件地址是可选的，因此模式窗口应在 x 秒不活动后关闭。

如何检测用户当前是否在模式中处于“活动”状态，如果没有则关闭它（使用 JQuery）？

应该重置倒数计时器，并且在以下情况下模式保持打开状态：

用户开始输入。

模态应该关闭如果;

输入已处于非活动状态 x 秒（用户离开）。

我已经完成了一半，剩下的只是需要一些帮助。目前定时器只在每次点击输入时改变。

我当前的代码如下；

Here's a link 我的小提琴。

HTML

<button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
<div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h1>Hello</h1>
      </div>
      <div align="center" class="modal-body">
        <p>Some text here.</p>
        <p span id="countdown"></p>
        <!-- show count down timer here -->
        <form id="memberNumberForm" class="form-inline">
          <div class="form-group mb-2">
            <input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Send</button>
            <button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

JQuery

$(document).ready(function() {
  $("#feedbackFormBad").on("touchstart, click", function(e) {
    $('#memberNumberModal').modal('toggle');
    var counter = 5;
    var interval = setInterval(function() {
      counter--;
      $("#memberNumber").focus(function() {
        $("#countdown").html('Window will close in ' + counter + ' seconds.');
      });

      if (counter == 0) {
        $('#memberNumberModal').modal('hide');
        clearInterval(interval);
      }
    }, 1000);
  });
});

感谢任何帮助。

【问题讨论】：

看起来像 stackoverflow.com/a/1009413/3126973 的副本

标签： javascript jquery bootstrap-4 bootstrap-modal

【解决方案1】：

试试下面的 javascript 代码

$(document).ready(function() {
  $("#feedbackFormBad").on("touchstart, click", function(e) {
    $('#memberNumberModal').modal('toggle');
    var counter = 5;
    var interval = setInterval(function() {
      counter--;
      $("#countdown").html('Window will close in ' + counter + ' seconds.');

      if (counter == 0) {
        $('#memberNumberModal').modal('hide');
        clearInterval(interval);
      }
    }, 1000);
    $('body').bind('mousedown keydown', function(event) {
       counter = 5;
    });
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<body>
  <button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
  <hr>
  <p>The timer should be reset if:</p>
  <ul>
    <li>The user begins to type in the input.</li>
  </ul>
  <p>The modal should be closed if:</p>
  <ul>
    <li>The input has been inactive for x seconds (user leaves).</li>
  </ul>
  <div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header modal-header-primary">
          <h1>Hello</h1>
        </div>
        <div align="center" class="modal-body">
          <p>Some text here.</p>
          <p span id="countdown"></p>
          <!-- show count down timer here -->
          <form id="memberNumberForm" class="form-inline">
            <div class="form-group mb-2">
              <input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary">Send</button>
              <button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

在事件中重置计数器可能会起作用，希望它满足您的要求。

【解决方案2】：

您可以结合使用setInterval 和all of the events 来实现此目的。我已经注释了下面的代码。

更新

最初，我使用 keyup 函数发布了一个答案 - 缺少 touchscreen 部分要求。但是，下面会监听文本输入的任何更改。让我知道这是否有效。

事件取自这里的答案 Best way to track onchange as-you-type in input type="text"?

// Keep track of if user is active
var active = true;

// keep track of how long since the user has typed
var timeElapsed = 0;

// check every second
setInterval(function(){
  timeElapsed += 1;
  
  // example
  $("#timer").html(timeElapsed + " seconds inactive");
  
  // a minute has passed since the user has typed
  if(timeElapsed == 60){
    // close modal
    $('#memberNumberModal').modal('hide');
  }
}, 1000);

// if the user types, reset the timer
$("#test").on('change keydown paste input propertychange click keyup blur', function(){
  // user is active, has typed
  timeElapsed = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="test" type="text">
<span id="timer"></span>

【讨论】：

如果这可行，并且您不想要所有这些事件，也许您可以将它们一一删除，直到找到有效的事件。