如何关注Svelte中新增的输入？

Question

我使用#each为tasks数组的每个成员显示输入。当我单击“添加任务”按钮时，新元素将插入到数组中，因此新的输入将出现在#each循环中。

单击“添加任务”按钮后，如何聚焦已添加的输入？

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

Answer 1

Rich Harris有更好的解决方案

您可以使用use:action：

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

例如：

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

Answer 2

您可以使用以下autofocus属性：

<script>
  let tasks = [];

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

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

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

请注意，您将收到一个可访问性警告。这是因为可访问性指南实际上建议您不要这样做：

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

由您确定此建议是否与您的情况相关！

Answer 3

您可以使用bind:this和tick

例如：

<script>
  import { tick } from 'svelte';

  let tasks = [];

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

    await tick();
    newTask.input.focus();
  }
</script>

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

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

解释我的方法的优点

tasks如果数组最初不为空会发生什么？then 方法autofocus和方法use:action的缺点是，当列表最初显示时，焦点位于最后一个字段。这可能并不理想。

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