Javascript 为什么D3'；让我们第一次专注于输入工作？_Javascript_D3.js_Focus_Forms

Javascript 为什么D3'；让我们第一次专注于输入工作？

javascript d3.js forms

Javascript 为什么D3'；让我们第一次专注于输入工作？,javascript,d3.js,focus,forms,Javascript,D3.js,Focus,Forms,使用D3是可能的，甚至不需要（我不知道为什么，但我没有抱怨）但这只是第一次起作用。第二次按下Set（即：Set，Reset，Set）后，输入字段不接收焦点。为什么? 将回调设置为焦点会导致错误 <!DOCTYPE HTML> <head> <style> div { width: 300px; } div#outerdiv { height: 500px; background-color: #ccc; }

使用D3是可能的，甚至不需要（我不知道为什么，但我没有抱怨）

但这只是第一次起作用。第二次按下

Set

（即：

Set

，

Reset

，

Set

）后，输入字段不接收焦点。为什么?

将回调设置为焦点会导致错误

<!DOCTYPE HTML>
<head>
    <style>
        div { width: 300px; }
        div#outerdiv  { height: 500px; background-color: #ccc; }
        div#topdiv    { height: 400px; background-color: #dff; }
        div#bottomdiv { height: 0px;   background-color: #ffd; display: 'none' }
        input:focus { background-color: pink; }
    </style>
</head>
<body>
    <div id="outerdiv">
        <div id="topdiv">
            <button onclick=open_form();>Set</button>
            <button onclick=close_form();>Reset</button>
        </div>

        <div id="bottomdiv">
            <form action="javascript:close_form()">
                Name:
                <input type="text" id="myTextField" name="name">
                <input type="submit" name="submit" value="Submit">
            </form>
        </div>
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

    <script>
        function open_form() {
            d3.select('#topdiv').transition().duration(500)
              .style('height', '100px');
            d3.select('#bottomdiv').transition().duration(500)
              .style('height', '300px').style('display', 'inline-block');

            d3.select("#myTextField").node().focus();
        } 
        function close_form() {
            d3.select('#topdiv').transition().duration(500)
              .style('height', '390px');
            d3.select('#bottomdiv').transition().duration(500)
              .style('height', '10px').style('display', 'none');
        }
    </script>
</body>


div{宽度：300px；}
div#outerdiv{高度：500px；背景色：#ccc；}
div#topdiv{高度：400px；背景色：#dff；}
div#bottomdiv{高度：0px；背景色：#ffd；显示：“无”}
输入：焦点{背景色：粉红色；}
设置
重置
姓名：
函数open_form（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'100px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'300px'）。style（'display'，'inline block'）；
d3.选择（“#myTextField”）.node（）.focus（）；
} 
函数close_form（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'390px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'10px'）。style（'display'，'none'）；
}

它无法找到#myTextField，因为它处于转换中期。可以通过删除display:inline块的转换来修复此问题，如下所示

function open_form() {
    d3.select('#topdiv').transition().duration(500)
      .style('height', '100px');
    d3.select('#bottomdiv').style('display', 'inline-block');
    d3.select('#bottomdiv').transition().duration(500)
      .style('height', '300px');
    d3.select("#myTextField").node().focus();
}

它无法找到#myTextField，因为它处于过渡中期。可以通过删除display:inline块的转换来修复此问题，如下所示

function open_form() {
    d3.select('#topdiv').transition().duration(500)
      .style('height', '100px');
    d3.select('#bottomdiv').style('display', 'inline-block');
    d3.select('#bottomdiv').transition().duration(500)
      .style('height', '300px');
    d3.select("#myTextField").node().focus();
}

每次按下重置按钮，即调用

关闭表单（）

时，您的

#bottomdiv

将转换为

显示：无

：

d3.select('#bottomdiv').transition().duration(500)
    .style('height', '10px').style('display', 'none');

不过，这也有一些副作用。查看上的HTML5规范可以看出，未呈现的元素也不可聚焦：

7.4.2重点管理如果满足以下所有条件，则元素可聚焦：

[……]
元素为或[…]

因此，下次单击Set时，调用

open\u form（）

时，输入不可聚焦，因为到

内联块的转换尚未结束。解决这一问题的最简单方法是为转换的结束
事件创建一个脚本，该事件将在转换结束后触发
   d3.select('#bottomdiv').transition().duration(500)
       .style('height', '300px').style('display', 'inline-block')
       .on("end", () => d3.select("#myTextField").node().focus());

请查看以下代码片段，以获得一个可用的演示：

函数打开形式（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'100px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'300px'）。style（'display'，'inline block'））
.on（“end”，（）=>d3.select（“#myTextField”）.node（）.focus（））；
} 
函数close_form（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'390px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'10px'）。style（'display'，'none'）；
}
div{width:300px；}
div#outerdiv{高度：500px；背景色：#ccc；}
div#topdiv{高度：400px；背景色：#dff；}
div#bottomdiv{高度：0px；背景色：#ffd；显示：“无”}
输入：焦点{背景色：粉红色；}

设置
重置
姓名：
每次点击重置按钮，即调用关闭表单（）
时，您的#bottomdiv
将转换为显示：无
：
d3.select('#bottomdiv').transition().duration(500)
    .style('height', '10px').style('display', 'none');

不过，这也有一些副作用。查看上的HTML5规范可以看出，未呈现的元素也不可聚焦：
7.4.2重点管理
如果满足以下所有条件，则元素可聚焦：

[……]
元素为或[…]

因此，下次单击Set时，调用open\u form（）
时，输入不可聚焦，因为到内联块的转换尚未结束。解决这一问题的最简单方法是为转换的结束
事件创建一个脚本，该事件将在转换结束后触发
   d3.select('#bottomdiv').transition().duration(500)
       .style('height', '300px').style('display', 'inline-block')
       .on("end", () => d3.select("#myTextField").node().focus());

请查看以下代码片段，以获得一个可用的演示：

函数打开形式（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'100px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'300px'）。style（'display'，'inline block'））
.on（“end”，（）=>d3.select（“#myTextField”）.node（）.focus（））；
} 
函数close_form（）{
d3.选择（'#topdiv'）.transition（）.持续时间（500）
.style（'height'，'390px'）；
d3.选择（'#bottomdiv'）.transition（）.持续时间（500）
.style（'height'，'10px'）。style（'display'，'none'）；
}
div{width:300px；}
div#outerdiv{高度：500px；背景色：#ccc；}
div#topdiv{高度：400px；背景色：#dff；}
div#bottomdiv{高度：0px；背景色：#ffd；显示：“无”}
输入：焦点{背景色：粉红色；}

设置
重置
姓名：
self的家庭作业：找出.on（'end'，..）和.each（'end'，..）之间的区别，如下所示：@Sebastian是在v3中注册处理程序函数的方法。从v4开始，它被重命名为。self的家庭作业：找出.on（'end'，..）和.each（'end'，..）之间的区别，如下所示：@Sebastian是在v3中注册处理程序函数的方法。从v4起，此名称重命名为。