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

留下电子邮件地址是可选的，因此模态窗口应在x秒后关闭。

如何检测用户当前是否在模态中"活动"并在不关闭(使用jQuery(？

(使用(？

应重置倒数计时器，如果以下方式保持模态打开：

用户开始输入输入。

如果;

应关闭模态

输入一直无效x秒(用户叶(。

我完成了一半的完整，只需要在其余部分就需要一些帮助即可。当前，计时器仅在输入的每次点击时更改。

我当前的代码在下面;

这是指我小提琴的链接。

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);
  });
});

任何帮助都将不胜感激。

尝试以下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>

您可以使用setInterval和all of the events的组合来实现这一目标。我已经评论了下面的代码。

更新

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

事件是从这里从这个答案中获取的在输入类型中跟踪按您型的on Change type的最佳方法="？

// 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>

jQuery无活动后关闭模态

更新

相关内容

最新更新

热门标签：