I'm trying to write a simple function that will make it appear as though someone is typing in a textarea

-- This is my function (forgive me if its atrocious, but I don't normally use javascript) --- The console.log() part works fine, but for some reason I cannot get this script to update the dom the way I would expect...

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

I appreciate any insight you can give me.

I'm trying to write a simple function that will make it appear as though someone is typing in a textarea

-- This is my function (forgive me if its atrocious, but I don't normally use javascript) --- The console.log() part works fine, but for some reason I cannot get this script to update the dom the way I would expect...

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

I appreciate any insight you can give me.

• javascript
• jquery
• dom

• Why have you tagged this jQuery if you're not using jQuery? – user229044 ♦ Commented May 15, 2014 at 20:39
• What does happen? Also, jsfiddle/etc is nice for stuff like this. – Dave Newton Commented May 15, 2014 at 20:41
• jQuery is an option I am willing to use. In fact, I tried jQuery first. Good point, I'll throw in a jsfiddle, momentarily. Everything works, except for the part in the loop that is supposed to update the contents of the textarea.... even console.log shows each update... – rm-vanda Commented May 15, 2014 at 20:53

2 Answers 2

jsFiddle Demo

All you were missing was a construct instead of Sleep. The js approach for acplishing this is to use a timeout and a recursive call in order to iterate through your string

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

You can do something like this using setTimeout function. 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();

  }
})