Alpine.js — отображение поля ввода и одновременное добавление к нему фокуса

11.05.2021Рубрика: ВопросыАвтор: admin

У меня есть кнопка, и когда пользователь нажимает на нее, должен отображаться элемент ввода, и он должен иметь фокус.

Я пробовал это:

<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>

Но это не работает.

Вы уверены, что alpine.js загружается правильно? Потому что я скопировал / вставил ваш код в скрипт с alpine.js, и он работает нормально — person Jeroen van Rensen schedule 11.05.2021

Да, я. Вы можете проверить этот редактор: w3schools.com/code/tryit.asp?filename = GQEY8EWSLJHB Когда я нажимаю кнопку, ввод должен отображаться и иметь фокус — person Jeroen van Rensen schedule 11.05.2021

Извините, я не понял, что основное внимание было уделено неработающей части. Ответ Craig E ниже правильный (вы также можете использовать setTimeout) — person Jeroen van Rensen schedule 12.05.2021

Post Views: 115

См. также: При выборе изменения получить значение параметра

1 alpine.js javascript

Комментарии: 1

Jeroen van Rensen 12.05.2021 в 00:00
Чтобы сосредоточить внимание на вводе сразу после его отображения, вам нужно использовать функцию 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

Спасибо, Крейг Э! — person Jeroen van Rensen; 17.05.2021
Ответить

Добавить комментарий