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

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

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

<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

См. также:  Как я могу проверить, есть ли значение, например имя существует в коллекции в любом из документов в Cloud Firestore?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Jeroen van Rensen

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: