Директива wire:focus

Директива wire:focus вешается на HTML-элемент и автоматически устанавливает фокус на этом элементе при загрузке компонента или после его обновления. Это полезно для полей ввода, чтобы пользователь сразу мог начать вводить данные без лишнего клика. Директива может принимать модификаторы .delay, .debounce и .throttle для управления временем установки фокуса.

Синтаксис

<input type="text" wire:focus>

Пример

Давайте создадим поле ввода, которое получает фокус сразу после загрузки компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class SearchForm extends Component
	{
		public $query = '';
		
		public function render()
		{
			return view('livewire.search-form');
		}
	}
?>

<div>
	<input type="text" wire:focus wire:model="query" placeholder="Search...">
	<p>Query: {{ $query }}</p>
</div>

Результат выполнения кода:

<div>
	<input type="text" placeholder="Search...">
	<p>Query: </p>
</div>

В браузере курсор будет автоматически установлен в поле ввода, и пользователь сможет сразу начать печатать.

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskList extends Component
	{
		public $tasks = [];
		public $newTask = '';
		
		public function addTask()
		{
			if (strlen($this->newTask) > 0) {
				$this->tasks[] = $this->newTask;
				$this->newTask = '';
			}
		}
		
		public function render()
		{
			return view('livewire.task-list');
		}
	}
?>

<div>
	<ul>
		@foreach ($tasks as $task)
			<li>{{ $task }}</li>
		@endforeach
	</ul>
	<input type="text" wire:focus wire:model="newTask" placeholder="New task...">
	<button wire:click="addTask">Add</button>
</div>

После добавления задачи поле ввода снова получит фокус, позволяя пользователю быстро вводить следующую задачу.

Пример

Используем модификатор .delay для установки фокуса с задержкой в 200 миллисекунд:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DelayedFocus extends Component
	{
		public $text = '';
		public $show = false;
		
		public function showInput()
		{
			$this->show = true;
		}
		
		public function render()
		{
			return view('livewire.delayed-focus');
		}
	}
?>

<div>
	@if ($show)
		<input type="text" wire:focus.delay.200ms wire:model="text" placeholder="Type here...">
	@endif
	<button wire:click="showInput">Show input</button>
	<p>Text: {{ $text }}</p>
</div>

После нажатия на кнопку поле ввода появляется и через 200 миллисекунд получает фокус.

Пример

Используем модификатор .debounce для установки фокуса после того, как пользователь перестанет вводить текст на 300 миллисекунд:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DebouncedFocus extends Component
	{
		public $search = '';
		public $results = [];
		
		public function updatedSearch()
		{
			if (strlen($this->search) > 0) {
				$this->results = [
					'Result 1 for ' . $this->search,
					'Result 2 for ' . $this->search,
				];
			} else {
				$this->results = [];
			}
		}
		
		public function render()
		{
			return view('livewire.debounced-focus');
		}
	}
?>

<div>
	<input type="text" wire:focus wire:model.debounce.300ms="search" placeholder="Search...">
	<ul>
		@foreach ($results as $result)
			<li>{{ $result }}</li>
		@endforeach
	</ul>
</div>

Поле ввода получает фокус при загрузке, а обновление результатов происходит с задержкой 300 миллисекунд после окончания ввода.

Смотрите также

директиву wire:blur,
которая срабатывает при потере фокуса элементом
директиву wire:model,
которая связывает поле ввода со свойством компонента
директиву wire:change,
которая срабатывает при изменении значения поля
директиву wire:click,
которая обрабатывает клик по элементу