title: Focus doesn't work on textarea triggered by javascript onclick event
body: <p>I have a simple transition thing, where a message says something like "Click here to type" and this is a div which when clicked, hides this div and shows the textarea with a flashing cursor. I have the focus through onload when the page initially loads but I'm after, triggering the focus when wanted. </p>
  
  <p>So I have something like this: </p>
  
  <p><strong>interface</strong> </p>
  
  <pre><code>&lt;div id="message" onclick="showPad();"&gt;&lt;span class="message"&gt;Click to write&lt;/span&gt;&lt;/div&gt;
  &lt;form name="entry"&gt;
  &lt;textarea id="writingpad" name="writingpad" placeholder="write here"&gt;&lt;/textarea&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>javascript</strong> </p>
  
  <pre><code>&lt;script&gt;
  function showPad() {
  document.getElementById('message').style.display = "none";
  document.getElementById('writingpad').style.display = "inline-block";
  
  // this is what I've tried for focus
  
  document.entry.writingpad.focus(); // didn't work
  $('#writingpad').live('focus', function() {
  // document.entry.input.focus(); possibly redundant
  }
  $('#writingpad').focus(); // doesn't work
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>working script</strong></p>
  
  <pre><code>function showPad() {
  $('#writingpad').focus();
  }
  </code></pre>