CODEWITHSUNDEEP
blazorkeyboard-eventsblazor-webassembly
Diego Rodriguez Nava
Diego Rodriguez Nava

Reputation: 737

Blazor, how can I trigger the enter key event to action a button function?

I was trying the to-do list example from Microsoft.

I want to add a todo item, but instead of pressing the button with a mouse click I want to press the enter key. I'm not happy with using JS like in this solution: How to set the focus to an InputText element? I tried to trigger the method private void Enter(KeyboardEventArgs e) by this line of code:

<button @onclick="AddTodo" @onkeypress="@(e=>Enter(e)" tabindex="0"  >Add todo</button>

However, it didn't work.

    enter code here
    <input placeholder="Something todo" @bind="newTodo" />
    <button @onclick="AddTodo" @onkeypress="Enter" tabindex="0"  >Add todo</button>

    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
        private string newTodo;
    
        private void AddTodo()
        {
            if (!string.IsNullOrWhiteSpace(newTodo))
            {
                todos.Add(new TodoItem { Title = newTodo });
                newTodo = string.Empty;
            }
        }
    
        //private void Enter(KeyboardEventArgs e)
            private void Enter()
        {
            //if (e.Key == "Enter")
            {
                if (!string.IsNullOrWhiteSpace(newTodo))
                {
                    todos.Add(new TodoItem { Title = newTodo });
                    newTodo = string.Empty;
                }
            }
        }
    }

Upvotes: 58

Views: 85371

Answers (6)

Umair
Umair

Reputation: 5481

onkeypress is fired only for character keys. onkeydown will fire for all keys pressed. I found some explanation of differences between all key events here

Try it with onkeydown and it worked:

<input type="text" @onkeydown="@Enter" />

In the event handler you will have to do this (notice that I check for both Enter and NumpadEnter keys):

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
         // ...
    }
}

Upvotes: 120

clamchoda
clamchoda

Reputation: 4961

These answers work great unless they are nested within an <EditForm>. Solutions using @onkeydown="@Enter" will also trigger the <EditForm> OnValidSubmit.

In this case, the best solution I've found is to nest another <EditForm> wrapped around the <input> and using it's OnValidSubmit to detect the enter key.

<EditForm EditContext="_editContext" OnValidSubmit="HandleValidFormSubmit">
    -- SOME OTHER FORM CONTROLS HERE ---
    <EditForm EditContext="_editContext" Context="entercontext" OnValidSubmit="Enter">
        <input type="text" />
    </EditForm>
</EditForm>

private void Enter()
{

}

Upvotes: 1

Petr Stipek
Petr Stipek

Reputation: 91

As mentioned Umair, you can use:

<input type="text" @onkeydown="@Enter" />

With handler

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
         // ...
    }
}

but this solution does not cover "Enter press" on mobile device keyboards (tested on my Android). If you use e.Key instead of e.Code, then it covers also NumPad enter and the mobile device as well

public void Enter(KeyboardEventArgs e)
{
    if (e.Key == "Enter")// Covers: Enter + NumPad Enter + Mobile keyboard Go to(enter)
    {
         // ...
    }
}

Here is a nice web where you can test it: https://w3c.github.io/uievents/tools/key-event-viewer.html Just compare the UI Events Key and Code behaviour

Upvotes: 3

Faridul Huk
Faridul Huk

Reputation: 51

We can achieve this by combining the two events

<input placeholder="Task Heading" @bind="title" id="todo"  @bind:event="oninput" @onkeydown="@Enter1" />


public async Task Enter1(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
        await js.InvokeVoidAsync("foucusById", "desc");
    }

}

Upvotes: 4

Jason Honingford
Jason Honingford

Reputation: 598

The browser will already do this if you add the type="submit" attribute to your button.

<button type="submit" @onclick="AddTodo" @onkeypress="Enter" tabindex="0"  >Add todo</button>

Upvotes: -2

Mister Magoo
Mister Magoo

Reputation: 8994

If you use an HTML form, it is simple - no looking for keypresses, just let the browser do the work:

<form @onsubmit=Enter>
  <label for="todo">What to do?</label>
  <input id="todo" placeholder="Something todo" @bind="newTodo" />
  <button>Add todo</button>
</form>
<ul>
@foreach(var item in todos)
{
    <li @key=item>@item.Title</li>
}
</ul>

@code {
    private class TodoItem { public string Title { get; set; } }
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void Enter()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

You can try it out here: https://blazorrepl.com/repl/wPabvwlv138n6KMN23

Upvotes: 42

Related Questions