EditForm-如何防止按回车键提交 [英] EditForm - How can I prevent submit on pressing enter key

问题描述

我发现

I've found this article but I'm having a hard time to understand how can I prevent submit on "enter" key independently by any <input>

<EditForm Model="exampleModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />
    <InputText id="name2" @bind-Value="exampleModel.Name2" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    public class ExampleModel
    {
         [Required]
         [StringLength(10, ErrorMessage = "Name is too long.")]
         public string Name { get; set; }
         public string Name2 {get; set;}
    }
}

用例

Enter键在HTML表单上，如果您要填写文本框，然后按Enter键，即使您尚未完成其余信息的填写，它也将提交表单.有许多使用此功能的网站，例如，当您按Enter键时，将提交Google搜索框.之所以可行，是因为您只需要填写一个文本框，但是如果要填写的字段不止一个，则您不希望在Enter键上提交表单.

Enter key On HTML forms if you are filling out a text box and press the enter key it will submit the form, even if you haven't finished filling in the rest of the information. There are many websites which use this feature such as Google search box will submit when you press the enter key. This works because you only have one text box to fill out, but if there are more than one field to fill in you don't want the form to submit on the enter key.

推荐答案

Leonardo Lurci，这是一个完全用C#实现的完整解决方案，没有JSInterop.事实证明，微软已经提供了此功能，但是他们没有提供足够的示例来演示如何使用它.

Leonardo Lurci, here's a complete solution implemented purely in C#, no JSInterop. As it turned out, Microsoft has already provided this feature, but they did not provide enough samples to demonstrate how to use it.

事实证明，我不能将@onkeypress="@KeyHandler"和@onkeypress:preventDefault对与Forms组件(例如InputText)一起使用，但是将这些指令应用于Html标签是可行的，并且效果很好.例如，查看如何将这些指令应用于提交"按钮.

As it turned out, I cannot use the pair @onkeypress="@KeyHandler" and @onkeypress:preventDefault with the Forms components such as InputText, but applying these directives to Html tags is viable and works perfectly well. See for instance how I apply these directives to the "submit" button.

因此，我将基类InputBase子类化，该类是InputText组件所派生的类，它通过添加输入元素来覆盖默认视图呈现，我可以在其中添加新功能的指令.

Consequently, I subclass the the base class InputBase, this is the class from which the InputText components derives, overrides the default view rendering by adding an input element to which I can add the directives of the new feature.

@inherits InputBase<string>

<input type="text" value="@CurrentValueAsString" id="Id" class="@CssClass" 
   @onkeydown="KeyDownHandler" @onkeypress="KeyPressHandler" 
                                               @onkeypress:preventDefault/>

 @code{

protected override bool TryParseValueFromString(string value, out string 
                                  result, out string validationErrorMessage)
{
    result = value;
    validationErrorMessage = null;
    return true;
}

void KeyDownHandler(KeyboardEventArgs args)
{
    if (args.Key == "Backspace" && CurrentValueAsString.Length >=1)
    {
        CurrentValueAsString = CurrentValueAsString.Substring(0, 
                                   CurrentValueAsString.Length - 1);
    }
}

 void KeyPressHandler(KeyboardEventArgs args)
 {

    if (args.Key == "Enter")
    {
        return;
    }
    var key = (string)args.Key;
    CurrentValueAsString += key;
 }
}

用法

<p>Leave me a comment</p>

<EditForm Model="Model" OnValidSubmit="HandleValidSubmit" >
<DataAnnotationsValidator />

 <div class="form-group">
    <label for="name">Name: </label>
    <TextBox Id="name" Class="form-control" @bind-Value="@Model.Name" >
    </TextBox>
    <ValidationMessage For="@(() => Model.Name)" />

 </div>
 <div class="form-group">
    <label for="body">Text: </label>
    <InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text" > 
    </InputTextArea>
    <ValidationMessage For="@(() => Model.Text)" />
 </div>
 <p>
    <button type="submit" @onkeypress="KeyHandler" @onkeypress:preventDefault>
        Submit
    </button>
 </p>
</EditForm>


@code
{
    private Comment Model = new Comment();

    private void HandleValidSubmit()
    {
         Console.WriteLine("Submit...");
    }


    void KeyHandler(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
           return;
         }
    }

    public class Comment
    {
        public string Name { get; set; } = "Jeff";
        public string Text { get; set; } = "I'm Jeff. I'm from Canada";
    }

}

请不要犹豫，问任何问题

Please, don't hesitate to ask any questions

希望这对您有帮助...

Hope this helps...

这篇关于EditForm-如何防止按回车键提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！