如何在 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:

Actions are functions that are called when an element is created.

例如：

<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 实际上建议你不要这样做:

People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, autofocus can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locationso on the page/view.

由您决定此建议是否适合您的情况！

Answer 3

您可以使用bind:this and 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的缺点就是在最初显示列表时，焦点在最后一个字段上。这可能是不可取的。

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

如何在 Svelte 中关注新添加的输入？

How to focus on newly added inputs in Svelte?

javascript

svelte