Javascript '；自动对焦&x27；属性在输入元素上工作一次，但不是两次

我在d3.js中编码，有时使用

input

元素来收集用户的输入，而不使用

表单

。这个很好用

但是我注意到我不能在动态页面上一致地应用

自动对焦

属性；它只在第一次应用时起作用

下面是一个示例，包含所有编码。请注意，

input

元素第一次出现时，

autofocus

如何完美工作。即使编码是相同的，第二次也不起作用

解决这个问题将特别提高智能手机的用户体验

注意：方法

.focus（）

不起作用，我认为这是因为它只能应用于表单中的

输入
元素


h1，
P
输入{
字体系列：无衬线；
}
h1{
字号：1rem；
}
输入{
填充：0.5雷姆；
边界半径：1em；
颜色：灰色；
不透明度：0；
}
输入：：占位符{
字体大小：正常；
颜色：银色；
}
输入：焦点{
大纲：无；
}

测试自动对焦
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
createFirstInput（）；
}, 2000);
函数createFirstInput（）{
d3.选择（“h1”）
.text（“创建第一个输入字段”）
d3.选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.attr（“自动对焦”、“自动对焦”）
.transition（）
.期限（2000年）
.样式（“不透明”，1）；
d3.选择（“容器”）
.附加（“p”）
.text（“自动对焦工作；光标出现在输入字段中”）；
//5秒后删除输入字段
d3.超时（函数（）{
d3.选择（“h1”）
.text（“创建第二个输入字段”）；
d3.选择全部（“输入，p”）
.remove（）；
//创建第二个输入字段
createSecondInput（）；
}, 5000);
}
函数createSecondInput（）{
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
d3.选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.attr（“自动对焦”、“自动对焦”）
.transition（）
.期限（2000年）
.样式（“不透明”，1）；
d3.选择（“容器”）
.附加（“p”）
.text（“自动对焦不起作用；输入字段中没有光标”）；
}, 2000);
}
该方法确实有效：

input.node().focus();

这里，
input
是添加输入的D3选择（顺便说一下，说出您的选择！这是一个很好的实践）。通过对该选择使用
node（）
，我们得到实际的DOM元素，我们使用
focus（）
方法对其进行处理

以下是演示：


h1，
P
输入{
字体系列：无衬线；
}
h1{
字号：1rem；
}
输入{
填充：0.5雷姆；
边界半径：1em；
颜色：灰色；
不透明度：0；
}
输入：：占位符{
字体大小：正常；
颜色：银色；
}
输入：焦点{
大纲：无；
}

测试自动对焦
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
createFirstInput（）；
}, 2000);
函数createFirstInput（）{
d3.选择（“h1”）
.text（“创建第一个输入字段”）
d3.选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.attr（“自动对焦”、“自动对焦”）
.transition（）
.期限（2000年）
.样式（“不透明”，1）；
d3.选择（“容器”）
.附加（“p”）
.text（“自动对焦工作；光标出现在输入字段中”）；
//5秒后删除输入字段
d3.超时（函数（）{
d3.选择（“h1”）
.text（“创建第二个输入字段”）；
d3.选择全部（“输入，p”）
.remove（）；
//创建第二个输入字段
createSecondInput（）；
}, 5000);
}
函数createSecondInput（）{
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
var输入=d3。选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.attr（“自动对焦”、“自动对焦”）
.transition（）
.期限（2000年）
.样式（“不透明”，1）；
input.node（）.focus（）；
d3.选择（“容器”）
.附加（“p”）
.text（“带焦点的自动对焦（）方法不起作用”）；
}, 2000);
}
这是因为自动对焦应该只提供给一个输入元素。如果要更改焦点，请使用node（）的focus（）方法
这是代码。



测试自动对焦
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
createFirstInput（）；
}, 2000);
函数createFirstInput（）{
d3.选择（“h1”）
.text（“创建第一个输入字段”）
d3.选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.transition（）
.期限（2000年）
.style（“不透明度”，1）
.node（）
.focus（）；
d3.选择（“容器”）
.附加（“p”）
.text（“自动对焦工作；光标出现在输入字段中”）；
//5秒后删除输入字段
d3.超时（函数（）{
d3.选择（“h1”）
.text（“创建第二个输入字段”）；
d3.选择全部（“输入，p”）
.remove（）；
//创建第二个输入字段
createSecondInput（）；
}, 5000);
}
函数createSecondInput（）{
//等待2秒钟，然后使用自动对焦创建输入元素
d3.超时（函数（）{
var输入=d3。选择（“容器”）
.append（“输入”）
.attr（“类型”、“文本”）
.attr（“占位符”，“此处输入”）
.transition（）
.期限（2000年）
.style（“不透明度”，1）
.node（）
.focus（）；
d3.选择（“容器”）
.附加（“p”）
.text（“自动对焦应仅提供给一个输入元素
<div id="container">
  <h1>Testing the autofocus</h1>
</div>

<script>
  // wait 2 seconds, then create input element with autofocus
  d3.timeout(function() {
    createFirstInput();
  }, 2000);

  function createFirstInput() {
    d3.select("h1")
      .text("Creating first input field")
    d3.select("#container")
      .append("input")
      .attr("type", "text")
      .attr("placeholder", "input goes here")
      .transition()
      .duration(2000)
      .style("opacity", 1)
      .node()
      .focus();
    d3.select("#container")
      .append("p")
      .text("autofocus works; cursor appears in input field");
    // delete input field after 5 seconds
    d3.timeout(function() {
      d3.select("h1")
        .text("Creating second input field");
      d3.selectAll("input, p")
        .remove();
      // create second input field
      createSecondInput();
    }, 5000);
  }

  function createSecondInput() {
    // wait 2 seconds, then create input element with autofocus
    d3.timeout(function() {
      var input = d3.select("#container")
        .append("input")
        .attr("type", "text")
        .attr("placeholder", "input goes here")
        .transition()
        .duration(2000)
        .style("opacity", 1)
        .node()
        .focus();
      d3.select("#container")
        .append("p")
        .text("autofocus should be given to only one input element. If you want to change the focus use focus() method of node()");
    }, 2000);
  }
</script>