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

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

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 3

您可以使用bind:this和tick

例如：

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

  let tasks = [];

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

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

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

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

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

3 个答案: