Question

我有一个这样的表单字段。

<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秒后不再进行任何操作。我不知道如何实现它。我希望得到支持。感谢新手。

Answer 1

请看下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

表单字段的超时处理

1 个答案: