在javascript中模拟打字的外观，而不是实际的按键

我正在尝试编写一个简单的函数，使其看起来好像有人在textarea输入

– 这是我的function（原谅我，如果它的残暴，但我通常不使用javascript）— console.log()部分工作正常，但由于某种原因，我不能让这个脚本更新dom的方式我希望……

  function type(string) { value = ""; el = document.getElementById("typeArea"); for (var i = 0; i  textarea").val(value); el.textContent = value; console.log(value); sleep(160); } sleep(2000); } 

我很感激你能给我的任何见解。

Answer 1

jsFiddle Demo

你所缺少的只是一种结构而不是Sleep 。 完成此操作的js方法是使用超时和递归调用来迭代字符串

 function type(string,element){ (function writer(i){ if(string.length <= i++){ element.value = string; return; } element.value = string.substring(0,i); if( element.value[element.value.length-1] != " " )element.focus(); var rand = Math.floor(Math.random() * (100)) + 140; setTimeout(function(){writer(i);},rand); })(0) } 

Answer 2

你可以使用setTimeout函数做这样的事情。 Codepen

 $(function(){ simulateTyping('looks like someone is typing...', '#txt') function simulateTyping(str, textAreaId) { var textArea = $(textAreaId); var currentCharIndex = 0; function typeChar(){ if (currentCharIndex >= str.length) return; var char = str[currentCharIndex]; textArea.val(textArea.val() + char); currentCharIndex ++; setTimeout(typeChar, 500); } typeChar(); } })