Question

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

- 这是我的功能（原谅我，如果它的残暴，但我通常不使用javascript）--- --- console.log()部分工作正常，但出于某种原因，我无法按照我期望的方式更新dom ...

        function type(string) {
            value = "";

            el = document.getElementById("typeArea");
            for (var i = 0; i < string.length; i++) {
                value += string[i];
                //$("#fbw > 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();

  }
})

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

2 个答案: