Question

我在d3.js中编码，有时使用input元素来收集用户的输入而不使用form。这很好。

但我注意到我无法在动态页面上始终如一地应用autofocus属性;它仅在第一次应用时起作用。

下面是一个例子，包含所有编码。请注意autofocus元素第一次出现时input如何正常工作。即使编码相同，它也不会第二次起作用。

解决这个问题会改善智能手机的用户体验。

注意： .focus()方法不起作用，我认为这是因为它只能应用于作为表单一部分的input元素。

h1,
p,
input {
  font-family: sans-serif;
}

h1 {
  font-size: 1rem;
}

input {
  padding: 0.5rem;
  border-radius: 1rem;
  color: gray;
  opacity: 0;
}

input::placeholder {
  font-weight: normal;
  color: silver;
}

input:focus {
  outline: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<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")
      .attr("autofocus", "autofocus")
      .transition()
      .duration(2000)
      .style("opacity", 1);
    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() {
      d3.select("#container")
        .append("input")
        .attr("type", "text")
        .attr("placeholder", "input goes here")
        .attr("autofocus", "autofocus")
        .transition()
        .duration(2000)
        .style("opacity", 1);
      d3.select("#container")
        .append("p")
        .text("autofocus doesn't work; no cursor in input field");
    }, 2000);
  }
</script>

Answer 1

focus()方法确实有效：

input.node().focus();

在这里，input是附加输入的D3选择（顺便说一下，为你的选择命名！这是一个很好的做法）。通过在该选择上使用node()，我们得到了实际的DOM元素，我们使用focus()方法。

以下是演示：

h1,
p,
input {
  font-family: sans-serif;
}

h1 {
  font-size: 1rem;
}

input {
  padding: 0.5rem;
  border-radius: 1rem;
  color: gray;
  opacity: 0;
}

input::placeholder {
  font-weight: normal;
  color: silver;
}

input:focus {
  outline: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<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")
      .attr("autofocus", "autofocus")
      .transition()
      .duration(2000)
      .style("opacity", 1);
    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")
        .attr("autofocus", "autofocus")
        .transition()
        .duration(2000)
        .style("opacity", 1);
      input.node().focus();
      d3.select("#container")
        .append("p")
        .text("autofocus with focus() method does work");
    }, 2000);
  }
</script>

Answer 2

这是因为自动对焦应该只给一个输入元素。如果要更改焦点，请使用node（）方法的focus（）方法这是代码

<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>

“自动对焦”属性在输入元素

2 个答案: