Question

我希望在短d3动画中显示，并在完成后，自动选择/聚焦表单字段以接收用户输入。

似乎最好通过链接功能来完成。我尝试使用javascript函数focus（）在加载时选择表单字段（＆＃34;注册＆＃34;，＆＃34; inputname＆＃34;），但这不起作用。

如何在动画完成后自动选择表单字段？

d3.js：

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

</script>

HTML：

<html>
<head>
<script type="text/javascript"src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<p id="ready">Click when ready<p></th>
<p id='Display'>A</p>
<p id='Display'>B</p>
<p id='Display'>C</p>

<form name="signup" id="signup" method="post" action="#">   
    <table> 
        <tr>        
        <td colspan="2" class="labelcell"><label for="name">Name</label></td>   
        <td colspan="2" class="fieldcell">      
            <input type="text" name="inputname" id="inputname" tabindex="1" />  
        </td>   
        </tr>
    </table>
</form>
</body>
</html>

Answer 1

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

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

Answer 2

很清楚DEMO

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

你去吧

我改为

<p id='DisplayA' class="disp">A</p>
<p id='DisplayB' class="disp">B</p>
<p id='DisplayC' class="disp">C</p>

所以我可以用这个：

d3.selectAll(".disp")

并拥有代码

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

动画后关注表单域

2 个答案: