动画后关注表单域

Question

动画后关注表单域

我想在简短的d3动画中显示,并在完成后,自动选择/聚焦表单字段以获取用户输入.

看起来它最好通过链接功能来完成.我尝试使用javascript函数focus()在加载时选择表单字段("signup","inputname"),但这不起作用.

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

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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mbo*_*ock 13

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，2 月前
查看次数：	2968 次
最近记录：	14 年，2 月前