时间戳

首页 > 解决方案 > EditForm - 如何防止按回车键提交

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

问题描述

我找到了这篇文章，但我很难理解如何防止任何人独立提交“输入”键<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;}
    }
}

用例

回车键 在 HTML 表单上，如果您正在填写文本框并按下回车键，即使您尚未完成其余信息的填写，它也会提交表单。有许多网站使用此功能，例如当您按 Enter 键时会提交 Google 搜索框。这是因为您只有一个文本框要填写，但如果有多个字段要填写，您不希望表单在输入键上提交。

标签： blazor

解决方案

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

事实证明，我不能使用该对@onkeypress="@KeyHandler"和 @onkeypress:preventDefault诸如 InputText 之类的 Forms 组件，但是将这些指令应用于 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";
        }

    }

请不要犹豫，问任何问题

希望这可以帮助...

推荐阅读