Alpine.js

Question

我有一个按钮，当用户点击它时，应该显示一个输入元素并且它应该有焦点。

我试过这个：

<div x-data="{ show: false }">

    <input x-show="show" type="text" id="input" x-ref="input" />

    <button @click="show = !show; $refs.input.focus();">Button</button>

</div>

但是不行。

Answer 1

要在显示输入后立即将焦点放在输入上，您需要使用 Alpine 的 $nextTick 函数。试试这个稍微修改过的代码版本：

<div x-data="{ show: false }">

    <input x-show="show" type="text" id="input" x-ref="input" />

    <button @click="show = !show; $nextTick(() => { $refs.input.focus(); });">Button</button>

</div>

这里有一些关于 $nextTick 的更多信息：https://github.com/alpinejs/alpine#nexttick

Alpine.js - 显示输入字段并同时为其添加焦点

Alpine.js - Show an input field and add focus to it at the same time

javascript