如何在 Svelte 3 中进行条件自动对焦

Posted 2023-03-07

【中文标题】如何在 Svelte 3 中进行条件自动对焦

【英文标题】：How to have conditional autofocus in Svelte 3

【发布时间】：2022-01-22 17:38:26

【问题描述】：

我想将焦点转移到我的页面上以响应键盘输入。对于 Svelte，似乎最简单的方法是使用 autofocus 属性。但是我无法让有条件的自动对焦属性起作用。

这是我的问题的简单重现：https://svelte.dev/repl/0861d097921d4a35957f016a8c35cfe6?version=3.44.3

我做错了什么还是在 Svelte 3 中这不可能？

根据以下问题，在以前版本的 Svelte 中可以进行条件自动对焦：Sveltejs render html attribute conditionally

根据这个问题，Svelte 3 中的其他属性可能有条件：How to have a conditional attribute in Svelte 3?

【参考方案1】：

一种解决方案可能是在事物周围添加一个关键块，使其在每次更新 focusIndex 时重新运行。

例子

#key focusIndex
    #each items as item, index
        <input autofocus="index === focusIndex" value=item on:keydown=(ev) => test(ev) />
    /each
/key

不是最漂亮的解决方案，但可能会取消阻止您。

【讨论】：

谢谢，这确实有效，但似乎效率低下。在接受这个答案之前，我会再等一会儿看看是否有更好的方法。

嗯，我的真实代码比示例更复杂，而且这种方法也搞乱了我的模糊/焦点处理（我认为是因为获得焦点的元素被刷新破坏了）

【参考方案2】：

严格来说，不是对我提出的确切问题的回答，但我采用的替代方法是在元素上使用 bind:this 创建 DOM 元素数组，然后在 keydown 处理程序中显式调用.focus() 在 DOM 元素上。

示例：https://svelte.dev/repl/83934cd7924741a8a4c5a620f79d5bb5?version=3.44.3