Question

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

提前致谢！

Answer 1

为占位符设置动画

您可以使用placeholder attribute来显示示例输入。静态文本通常足以满足大多数用户的需求但是，您可以添加动画循环来模拟打字。使用占位符还允许您在不更改表单输入值的情况下显示文本。

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

将代码段运行到演示

＆＃13;

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

＆＃13;

input {font-family: 'Special Elite', cursive; font-size:36px; border:1px solid steelblue;color:black; font-weight:bold;}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

<input id="fullname" placeholder="Berlin, Germany">

＆＃13;

Answer 2

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

为占位符设置动画