Javascript 如何专注于苗条中新增的投入？

我使用#each来显示

任务

数组中每个成员的输入。当我单击AddTask按钮时，一个新元素被插入到数组中，因此在#each循环中会出现一个新的输入

单击Add task（添加任务）按钮后，如何集中已添加的输入

<script>
  let tasks = [];

  function addTask() {
    tasks = [...tasks, { title: "" }];
  }
</script>

{#each tasks as task}
  <input type="text" bind:value={task.title} />
{/each}

<button on:click={addTask}>Add task</button>

让任务=[]；
函数addTask（）{
tasks=[…tasks，{title:}]；
}
{#每个任务都是任务}
{/每个}
添加任务

里奇·哈里斯有一个更好的

---

您可以使用：

动作是在创建元素时调用的函数

例如：

<script>
  let tasks = [];

  function addTask() {
    tasks = [...tasks, { title: "" }];
  }

  function init(el){
    el.focus()
  }
</script>

{#each tasks as task}
  <input type="text" bind:value={task.title} use:init />
{/each}

<button on:click={addTask}>Add task</button>

让任务=[]；
函数addTask（）{
tasks=[…tasks，{title:}]；
}
函数初始化（el）{
el.focus（）
}
{#每个任务都是任务}
{/每个}
添加任务

您可以使用

自动对焦

属性：

让任务=[]；
函数addTask（）{
tasks=[…tasks，{title:}]；
}
{#每个任务都是任务}
{/每个}
添加任务

请注意，您将得到一个可访问性警告。那是因为我建议你不要这样做：

当焦点未经允许移动时，失明或视力低下的人可能会迷失方向。此外，自动对焦可能会给运动控制障碍者带来问题，因为它可能会为他们带来额外的工作，让他们从自动对焦区域导航到页面/视图上的其他位置

这取决于你决定这个建议是否与你的情况相关

您可以使用和

例如：

<script>
  let tasks = [];

  function addTask() {
    tasks = [...tasks, { title: "" }];
  }

  function init(el){
    el.focus()
  }
</script>

{#each tasks as task}
  <input type="text" bind:value={task.title} use:init />
{/each}

<button on:click={addTask}>Add task</button>

从“svelte”导入{tick}；
让任务=[]；
异步函数addTask（）{
设newTask={title:：}；
任务=[…任务，新任务]；
等待滴答声（）；
newTask.input.focus（）；
}
{#每个任务都是任务}
{/每个}
添加任务

解释我的方法的优点

如果

任务

数组最初不是空的，会发生什么情况？ 然后，方法

autofocus

和

use:action

的缺点是，当列表最初显示时，焦点在最后一个字段上。这可能不可取

---

我的方法只在单击“添加”按钮时控制焦点。

@AntonZotov毫不奇怪，Rich Harris有一个更好的解决方案。你的也很好。我使用它是因为我在使用自动对焦时遇到了一些问题。我没有调查它，但它可能与这个chrome bug有关：当URL在Chrome79中包含片段时，自动聚焦不起作用：

autofocus

现在不推荐使用；精巧的语言工具不鼓励它。使用该属性无疑是一个更优雅的解决方案，但这是无警告的！据我所知，这个解决方案并不比Rich Harris解决方案更好。它只是绕过了苗条的警告。这是愚弄苗条；但它不应该愚弄我们！在我的情况下，两个建议的答案都不起作用；我将解释：我有一个包含2个输入的表单，提交表单后，我希望光标回到第一个输入中。有什么建议吗？谢谢使用

获取要聚焦的输入的引用，然后调用

myInput.focus（）

表单提交后谢谢，这是一个很好的解决方案！然而，我渴望更多：不仅在屈服之后，而且在屈服之前。注意：解决方法是使用自动对焦！勾号是我的应用程序所需要的，因为元素之前隐藏在

{if}

后面，所以它还不存在。