Директива wire:keydown.escape

Директива wire:keydown.escape вешается на HTML-элемент и вызывает указанный метод компонента при нажатии клавиши Escape. В значение передаётся имя публичного метода. После вызова Livewire обновляет шаблон компонента.

Синтаксис

<input wire:keydown.escape="methodName">

Пример

Давайте очистим поле ввода по нажатию клавиши Escape:

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

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

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

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

Пример

Давайте закроем модальное окно по нажатию Escape:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Modal extends Component
	{
		public $isOpen = true;
		
		public function close()
		{
			$this->isOpen = false;
		}
		
		public function render()
		{
			return view('livewire.modal');
		}
	}
?>

@if ($isOpen)
	<div
		class="modal-overlay"
		wire:keydown.escape="close"
	>
		<div class="modal-content">
			<h2>Modal Window</h2>
			<p>Press Escape to close</p>
			<button wire:click="close">Close</button>
		</div>
	</div>
@endif

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

<div class="modal-overlay">
	<div class="modal-content">
		<h2>Modal Window</h2>
		<p>Press Escape to close</p>
		<button>Close</button>
	</div>
</div>

Пример

Давайте сбросим форму по нажатию Escape:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Form extends Component
	{
		public $name = '';
		public $email = '';
		public $message = '';
		
		public function resetForm()
		{
			$this->name = '';
			$this->email = '';
			$this->message = '';
		}
		
		public function render()
		{
			return view('livewire.form');
		}
	}
?>

<div wire:keydown.escape="resetForm">
	<input type="text" wire:model="name" placeholder="Name">
	<input type="email" wire:model="email" placeholder="Email">
	<textarea wire:model="message" placeholder="Message"></textarea>
	<p>Name: {{ $name }}</p>
	<p>Email: {{ $email }}</p>
	<p>Message: {{ $message }}</p>
</div>

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

<div>
	<input type="text" placeholder="Name">
	<input type="email" placeholder="Email">
	<textarea placeholder="Message"></textarea>
	<p>Name: </p>
	<p>Email: </p>
	<p>Message: </p>
</div>

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

директиву wire:keydown,
которая вызывает метод при нажатии любой клавиши
директиву wire:keydown.enter,
которая вызывает метод при нажатии клавиши Enter
директиву wire:keyup,
которая вызывает метод при отпускании клавиши
директиву wire:model,
которая привязывает поле ввода к свойству компонента