更新

Question

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

保留他们的电子邮件地址是可选的，因此模态窗口应在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);
  });
});

感谢任何帮助。

Answer 1

尝试使用以下javascript代码

＆＃13;

import { BrowserTab } from '@ionic-native/browser-tab';

constructor(private browserTab: BrowserTab) {

  browserTab.isAvailable()
  .then(isAvailable => {
  if (isAvailable) {
    browserTab.openUrl('https://ionic.io');
  } else {
    // open URL with InAppBrowser instead or SafariViewController
  }
 });
}

＆＃13;

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

＆＃13;

Answer 2

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

更新

最初，我使用keyup功能发布了一个答案 - 缺少触摸屏部分要求。但是，下面会监听文本输入的任何更改。如果有效，请告诉我。

事件来自这里的答案 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>

不活动后的JQuery Close Modal

2 个答案:

更新