title: Auto type inside text input
body: <p>I would like to let there automatically appear text inside an input type=text element.</p>
  
  <p>I would like to accomplish that the different kind of texts are stored inside an array and that every 5 seconds or so, a text is 'typed' by javascript into this field. Then I also like that when I focus on the field (to input text in it by keyboard) that it stops auto-typing and shows an empty input element.</p>
  
  <p>Anybody know how to go about this?
  I'm a back-end programmer, but need to do some frontend programming and just haven't had the time to thoroughly learn Javascript. At the moment I only know PHP thoroughly, but would expand my knowledge to css, html and javascript too.</p>
  
  <p>Hope somebody is able to help me out :)</p>
  
  <p><strong>EDIT: This is the solution I came up with and it works. The input field has as ID: searchBar.</strong> The code is not very elegant, but I'm still learning :) Thanks for the answers. It helped me a lot.</p>
  
  <pre><code>var searchBar = document.getElementById('searchBar');
  
  var keywords = ['Auto typed text number 1',
                 'This is number 2 auto typed',
                 'Yet another auto typed line',
                 'The last line before it loops again'];
  
  var index = 0;
  var arrCounter = 0;
  var focus = false;
  var timer1, timer2;
  
  function resetBox() {
      searchBar.value = '';
      index = 0;
      autoType();
  }
  
  var autoType = function() {
  
      if (focus) {
  
          return;
      }
  
      if (index &lt;= keywords[arrCounter].length) {
          searchBar.value = keywords[arrCounter].substr(0, index++);
          timer1 = setTimeout("autoType()", 50);
      } else {
  
          arrCounter++;
          if(arrCounter === keywords.length){
              arrCounter = 0;
          }
  
          timer2 = setTimeout(resetBox, 5000);
      }
  };
  
  autoType();
  $("#searchBar").on("focus", function(){
      focus = true;
      searchBar.value = '';
      clearTimeout(timer1);
      clearTimeout(timer2);
  
  }).on("blur", function(){
      setTimeout(function() {
          focus = false;
          resetBox();
      }, 1000);
  });
  </code></pre>