title: Focus on form field after animation
body: <p>I'd like to display at short d3 animation and upon completion, have a form field become automatically selected/focused to take user input. </p>
  
  <p>It seems like it is best accomplished through chaining functions. I tried to use the javascript function focus() that selects the form field ("signup","inputname") on load, but this isn't working. </p>
  
  <p>How do I select a form field automatically after animation completion?</p>
  
  <p>d3.js:</p>
  
  <pre><code>&lt;script&gt;
  selectReady = d3.selectAll("#ready")
      .on("mouseover", function(){d3.select(this).style("color", "red");})
      .on("mouseout", function(){d3.select(this).style("color", "black");})           
      .on("mousedown", animateDisplay); //starts animation with a mousepress
  
  function animateDisplay(){
      d3.selectAll("#Display")
          .transition()
          .delay(200)            
          .duration(1000)             
          .style("color","white") // changes Display to white
          .each("end",selectForm);
  };
  
  function selectForm(){
      d3.select("#inputname")
          .focus(); // remove() works here
  };  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p id="ready"&gt;Click when ready&lt;p&gt;&lt;/th&gt;
  &lt;p id='Display'&gt;A&lt;/p&gt;
  &lt;p id='Display'&gt;B&lt;/p&gt;
  &lt;p id='Display'&gt;C&lt;/p&gt;
  
  &lt;form name="signup" id="signup" method="post" action="#"&gt;   
      &lt;table&gt; 
          &lt;tr&gt;        
          &lt;td colspan="2" class="labelcell"&gt;&lt;label for="name"&gt;Name&lt;/label&gt;&lt;/td&gt;   
          &lt;td colspan="2" class="fieldcell"&gt;      
              &lt;input type="text" name="inputname" id="inputname" tabindex="1" /&gt;  
          &lt;/td&gt;   
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>