动画后关注表单域 [英] Focus on form field after animation
本文介绍了动画后关注表单域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在简短的d3动画中显示，完成后，会自动选择/聚焦表单字段以获取用户输入。
I'd like to display at short d3 animation and upon completion, have a form field become automatically selected/focused to take user input.
似乎最好通过链接函数来完成。我尝试使用javascript函数focus（）在加载时选择表单字段（signup，inputname），但这不起作用。
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.
如何在动画完成后自动选择表单字段？
How do I select a form field automatically after animation completion?
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>
推荐答案
这很清楚 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();
};
这篇关于动画后关注表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
