如何在非活动时间后添加随机输入

How to add random input after inactivity time?

本文关键字：添加 随机 输入 时间 非活动      更新时间：2023-09-26

我正在制作一个网页，我想在表单上产生"type"效果。在用户等待一段时间后，它开始键入一些文本作为示例，如果可能的话-用光标。我真的不知道从哪里开始。我正在使用jQuery。

提前感谢！

为占位符制作动画

您可以使用占位符属性来显示示例输入。静态文本通常对大多数用户来说已经足够了。但是，您可以添加一个动画循环来模拟键入。使用占位符还可以在不更改表单输入值的情况下显示文本。

下面的示例使用循环来模拟键入，并在用户输入信息时停止。不需要jQuery。

运行代码段进行演示

var timerId, placeholder = fullname.placeholder, n =0;
id = setInterval(function() {
  if (fullname.value) {
    // stop as user has typed something
    clearInterval(id);
    fullname.placeholder = placeholder;
   }
  else {
    // show next character
    fullname.placeholder = placeholder.substr(0,n);
    n = (n+1) % (placeholder.length+1);
  }
  
}, 400);
input {font-family: 'Special Elite', cursive; font-size:36px; border:1px solid steelblue;color:black; font-weight:bold;}
<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<input id="fullname" placeholder="Berlin, Germany">

您可以使用settimeout函数在表单加载时注册超时函数。

如果用户按下一个键，您可以取消它。

timeout函数回调可以使用jQuery设置输入的占位符。

考虑插入的代码片段，了解如何启动正确的实现。

(function() {
  "use strict";
  var exampleText = "my example text";
  var inactivityDelay = 2000;
  var typeDelay = 200;
  var interval;
  var appendExample = function() {
    var index = 0;
    interval = setInterval(function() {
      if (index >= exampleText.length) {
        clearInterval(interval);
        return;
      }
      var myinput = $("#myinput");
      myinput.attr("placeholder", myinput.attr("placeholder") + exampleText.charAt(index++));
    }, typeDelay);
  };
  var timeout = setTimeout(appendExample, inactivityDelay);
  $("#myinput").on("change paste keyup focus", function() {
    clearTimeout(timeout);
    clearInterval(interval);
    $("#myinput").attr("placeholder", "");
  });
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="myinput" maxlength="100" placeholder="" />
</form>

相关文章：