Use enter key to submit Modal's form

[kidmar]

I'm trying to edit the sample "ReturnDataFromModal" modal.
There is an input field.
I would like to be able to close the modal with the enter key (and maybe close it with esc).
Is it possible?

Here is the code from the sample:

<div class="simple-form">

    <div class="form-group">
        <label for="message">Message</label>
        <input @bind="Message" type="text" class="form-control" id="message" placeholder="Enter a message" />
    </div>

    <button @onclick="SubmitForm" class="btn btn-primary">Submit</button>
    <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
</div>

@code {

    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;

    string? Message { get; set; }

    protected override void OnInitialized() => BlazoredModal.SetTitle("Enter a Message");

    async Task SubmitForm() => await BlazoredModal.CloseAsync(ModalResult.Ok(Message));
    async Task Cancel() => await BlazoredModal.CancelAsync();

}

[larsk2009]

I think it is possible to use the enter key and escape key to manipulate the modal. I don't think it has much to do with blazored.modal. You can probably listen for the enter key and escape key events and close the modal in their event handlers?

[davem7714]

How would you do that? Do you have to use JavaScript?