EditForm - 如何防止按回车键提交

Question

我找到了这篇文章，但我很难理解如何防止任何人独立提交“输入”键<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 键，它将提交表单，即使您尚未完成其余信息的填写。有许多网站使用此功能，例如 Google 搜索框会在您按 Enter 键时提交。这是有效的，因为您只有一个文本框要填写，但如果要填写的字段不止一个，您不希望表单按回车键提交。

Answer 1

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

事实证明，我不能将这对@onkeypress="@KeyHandler"和 @onkeypress:preventDefaultForms 组件（例如 InputText）一起使用，但是将这些指令应用于 Html 标记是可行的并且运行良好。例如，请参阅我如何将这些指令应用于“提交”按钮。

因此，我将基类 InputBase 子类化，这是 InputText 组件派生自的类，通过添加一个输入元素来覆盖默认视图呈现，我可以向其中添加新功能的指令。

TextBox.razor（这个来代替 InputText）

    @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";
        }

    }

请不要犹豫，提出任何问题

希望这可以帮助...

Answer 2

将事件处理程序添加到您的输入并提交元素，如下所示：

<InputText id="name" @bind-Value="exampleModel.Name" @onkeydown="PreventSubmit"/>
<button type="submit" @onclick="ShouldISubmit">Submit</button>

将其添加到您的@code 块中：

public bool shouldsubmit { get; set; }

public bool entersubmit { get; set; }

public void PreventSubmit(KeyboardEventArgs ev)
{
    if (ev.Key == "Enter")
        entersubmit = true;
}

public void ShouldISubmit()
{
    if (entersubmit)
        shouldsubmit = false;
    else
        shouldsubmit = true;
    entersubmit = false;
}

将您的提交功能更改为此

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