动画后关注表单字段

我想在短片d3动画中显示，完成后，会自动选择/聚焦表单字段以获取用户输入。

看起来它最好通过链接function来完成。 我尝试使用javascript函数focus（）在加载时选择表单字段（“signup”，“inputname”），但这不起作用。

动画完成后如何自动选择表单域？

d3.js：

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

HTML：

      
Click when ready
 
A
 
B
 
C
 
 
 
 
Name
 
  
 
 
 
   

Answer 1

这是明确的DEMO

 d3.select("#inputname").focus is not a function http://fiddle.jshell.net/mplungjan/JfvbD/show/ Line 41 

干得好

我改变了这个

 
A
 
B
 
C 

所以我可以用这个：

 d3.selectAll(".disp") 

并有代码

 function selectForm(){ if (this.id!="DisplayC") return; document.getElementById('inputname').focus(); }; 

Answer 2

使用selection.node访问底层DOM元素，然后使用element.focus ：

 d3.select("#inputname").node().focus()