d3.js动态页面中input元素autofocus属性仅首次生效问题求助

我之前也踩过一模一样的坑！浏览器对autofocus属性的处理逻辑是一次性触发的——只有当元素第一次被插入DOM树的时候，浏览器才会识别这个属性并自动聚焦。后续哪怕你用完全相同的代码动态创建新的input元素，浏览器也不会再响应这个属性了，这就是问题的核心原因。

要搞定这个问题，别再依赖autofocus属性，而是在D3把元素插入DOM之后，手动调用原生DOM元素的focus()方法。直接上代码示例：

失效的旧写法 #

// 第一次创建input时autofocus有效，后续创建完全失效
d3.select("#input-container")
  .append("input")
  .attr("type", "text")
  .attr("autofocus", "autofocus");

修复后的正确写法 #

// 动态创建input元素
const newInput = d3.select("#input-container")
  .append("input")
  .attr("type", "text");

// 关键步骤：获取原生DOM节点并手动触发聚焦
newInput.node().focus();

移动端适配额外提醒 #

• 如果你的input是在用户交互（比如点击按钮、触摸事件）中创建的，这个方法在移动端完全符合浏览器规范，不会有兼容性问题。
• 要是你想在页面加载时自动创建多个input并聚焦，有些移动端浏览器会限制自动聚焦（防止骚扰用户），这种情况最好绑定到用户的主动操作上触发。
• 如果元素是通过D3过渡（transition）插入的，记得把focus()放在过渡结束的回调里，确保元素已经完全插入DOM：

  d3.select("#input-container")
    .append("input")
    .attr("type", "text")
    .transition()
    .duration(300)
    .style("opacity", 1)
    .on("end", function() {
      d3.select(this).node().focus();
    });
  

这个方法能完美解决动态创建input时的聚焦失效问题，大幅提升移动端用户的输入体验～

内容的提问来源于stack exchange，提问作者Markus