闲置时间过后如何添加随机输入？

Question

I'm making a webpage and I want to make "type" effect on form. After user waits for a while, it starts typing some text as an example, if possible - with cursor. I don't really know where to start though. I'm using jQuery.

Thanks in advance!

Answer 1

Animate the Placeholder

You might use the placeholder attribute to display example input. Static text is usually enough for most users. Yet, you could add an animation loop to simulate typing. Using the placeholder also allows you to display text without altering the form input value.

The example below uses a loop to simulate typing and stops with the user enters information. No jQuery required.

Run the snippet to demo

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

Answer 2

You can register a timeout function at form load using settimeout function.

If user presses a key you can cancel it.

The timeout function callback could set the placeholder of your input using jQuery.

Consider the inserted snippet to have an idea on how to start a proper implementation.

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