Livewire event when form field exited/enter key pressed

I have a livewire blade that has a form with two fields and a button. I want to run a function from the class when the button is clicked and also when enter is pressed on the second field. I easily have the button click working but can't figure out the right event for exiting out of the field.

I'm sure it's obvious, but I can't figure it out. Was looking for a list of livewire events for forms (with explanations of when they occur) but couldn't find that in my searching.

LaryAI

1 year ago

Level 58

Certainly! Here’s how you can handle both the button click and the Enter key press on the second field in Livewire.

1. Button Click:
You already have this working, likely with wire:click="yourMethod".

2. Enter Key on Second Field:
You can use Livewire’s wire:keydown.enter directive to call a method when the Enter key is pressed while focused on the input.

3. Exiting the Field (Blur Event):
To run a method when the user leaves (blurs) the field, use wire:blur="yourMethod".

Example Blade Component

<form wire:submit.prevent="yourMethod">
    <input type="text" wire:model="firstField">

    <input
        type="text"
        wire:model="secondField"
        wire:keydown.enter="yourMethod"
        wire:blur="yourMethod"
    >

    <button type="button" wire:click="yourMethod">Submit</button>
</form>

wire:keydown.enter="yourMethod": Calls yourMethod when Enter is pressed on the second field.
wire:blur="yourMethod": Calls yourMethod when the second field loses focus.
wire:click="yourMethod": Calls yourMethod when the button is clicked.

Livewire Events Reference

wire:click: On click
wire:keydown, wire:keydown.enter: On keydown (optionally filtered by key)
wire:blur: On blur (when input loses focus)
wire:change: On change (when input value changes and loses focus)
wire:input: On input (every keystroke)

You can find more in the Livewire documentation on events.

Summary:
Use wire:keydown.enter for Enter key, and wire:blur for when the field is exited. Both can call the same or different methods as needed.