聚焦表單字段動畫

後我想在短時間內D3動畫和完成時顯示，有一個表格字段成爲自動選擇/集中取用戶的輸入。聚焦表單字段動畫

現在看來似乎最好是通過鏈接功能來實現的。我嘗試使用JavaScript函數focus（）來選擇加載時的表單字段（「註冊」，「輸入名稱」），但這不起作用。

如何動畫完成後自動選擇表單域？

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>

來源

2012-03-22 Amyunimus

爲什麼在keydown上使用？爲什麼不只是'.each（「end」，function（）{if（this is last frame）document.response.inputname.focus（）}）;' – mplungjan 2012-03-22 12:17:18

這很好 - 但是這也行不通。我想知道如果這是焦點問題（） – Amyunimus 2012-03-22 12:39:25

我已經添加d3到這[小提琴]（http://jsfiddle.net/mplungjan/JfvbD/）你可以添加代碼和HTML來顯示這個例子嗎？ – mplungjan 2012-03-22 13:11:12

這是明確的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(); 
};

來源

2012-03-22 13:46:29 mplungjan

真棒謝謝！函數'document.getElementById（'inputname'）。focus（）'特別有用。 – Amyunimus 2012-03-22 14:58:11

使用selection.node訪問底層DOM元素，然後element.focus：

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

來源

2012-03-22 15:04:38 mbostock

也不錯。在文檔中找不到它。 +1 – mplungjan 2012-03-22 15:08:04

聚焦表單字段動畫

回答

相關問題