如何专注于 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 有一个更好的solution

---

你可以使用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>

请注意，您会收到可访问性警告。那是因为accessibility guidelines 实际上建议你不要这样做：

盲人或视力低下的人在未经许可移动焦点时可能会迷失方向。此外，自动对焦对于有运动控制障碍的人来说可能是个问题，因为它可能会为他们从自动对焦区域导航到页面/视图上的其他位置产生额外的工作。

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

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 数组最初不是空的会怎样？ 然后方法autofocus 和use:action 的缺点是当列表最初显示时，焦点在最后一个字段上。这可能是不可取的。

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