通过表单字段处理超时

debugcn 发表于 Dev

用户1643936

我有一个这样的表单域。

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Title: <input type="text" name="title"><br>
  Your Message: <textarea rows="4" cols="50"></textarea><br>
  <input type="submit" value="Submit">
</form>

现在，当用户在 5 秒后处于非活动状态时，我将发出一个带有帮助信息的警报（例如一个 div 通知）。所以这适用于以下代码：

<script>
$("#contact input").on("click",function(){
    clearTimeout(myTimeout);
});

var myTimeout = setTimeout(function(){ 
    alert("How can i help you"); 
}, 5000);

myTimeout;
</script>

当用户在每个输入字段中单击时，超时就清楚了。

我现在的待办事项

作为扩展，现在我的目的是在用户停止填写输入字段或在 10 秒后不做任何后续操作时推送相同的警报。我不知道如何实现它。我希望得到支持。一个新手的感谢。

不要投票给我

看看下面的片段：

var _formFillTimeout = null,
    formFillTimeout = function() {
      if (_formFillTimeout) window.clearTimeout(_formFillTimeout);
      
      _formFillTimeout = window.setTimeout(function() {
        window.alert("Don't stop filling the form!");
      }, 10000);
    };
    
$("form").on("keyup", "input, textarea", formFillTimeout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Title: <input type="text" name="title"><br>
  Your Message: <textarea rows="4" cols="50"></textarea><br>
  <input type="submit" value="Submit">
</form>

它检测用户何时开始填写表单，然后如果用户在 10 秒内没有在表单的字段中输入任何内容，则在交互停止时发出警报。如果用户不停止打字，计时器会不断刷新。但我不确定它是否包含您想要的所有交互情况。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。