如何在使用 Blazor <InputText> 时禁用 ENTER 键按下提交按钮

Posted

技术标签:

【中文标题】如何在使用 Blazor <InputText> 时禁用 ENTER 键按下提交按钮【英文标题】:How to Disable ENTER Key Press for submit button when using Blazor <InputText> 【发布时间】:2021-10-28 09:42:57 【问题描述】:

我似乎无法找到一种方法来禁用 &lt;button type="submit"&gt; 中的回车键,该 &lt;EditForm&gt; 包裹在 &lt;EditForm&gt; 中。

问题在于,在任何 blazor &lt;InputText&gt; 控件上,当用户按下 ENTER 键时,blazor 会激活验证和提交过程。

我也尝试过使用&lt;button type="submit" @onkeypress="@KeyHandler" @onkeypress:preventdefault&gt;,但它不起作用,表单仍在继续验证并提交。

更具体地说,在我的&lt;EditForm&gt; 中,我正在调用一个模式对话框,其中包含一个用于搜索项目的&lt;InputText&gt;,并且每次按下 ENTER 执行搜索时,表单都会在后台得到验证并提交:(

请帮忙????????????

【问题讨论】:

blazor-editform 是一个鲜为人知的标签,很少有人关注。如果您还有其他问题,请尝试 blazor。 【参考方案1】:

尝试以下方法:

<InputText @bind-Value="_model.Value" onkeypress="return event.keyCode!=13"/>
<input @bind-value="_model.Value" onkeypress="return event.keyCode!=13" />

感谢@dustysilicon。

这是我的测试页:

@page "/Editor"
<h3>EditForm</h3>

<EditForm EditContext="this._editContext" OnSubmit="SubmitForm">
    <div class="p-2">
        No Enter: <InputText @bind-Value="_model.SelectValue" onkeypress="return event.keyCode!=13"></InputText>
    </div>
    <div class="p-2">
        No Enter: <input type="number" @bind-value="_model.Value" onkeypress="return event.keyCode!=13" />
    </div>
    <div class="p-2">
        Enter: <input @bind-value="_model.SelectValue" />
    </div>
    <div class="p-2">
        <button type="submit" class="btn btn-success">Submit</button>
    </div>
</EditForm>
<div class="m-2 p-2">Value: @_model.Value</div>
<div class="m-2 p-2">@message</div>

@code 

    public class Model
    
        public int Value  get; set; 
        public string SelectValue  get; set; 
    

    private string message;
    Model _model = new Model();

    EditContext _editContext;

    protected override void OnInitialized()
    
        _editContext = new EditContext(_model);
    

    void SubmitForm()
    
        message = $"Form Submitted at :DateTime.Now.ToLongTimeString()";
    

【讨论】:

嗨@MrCakaShaunCurtis,非常感谢您的回复..我尝试了您的建议,但 Blazor 无法识别 event.keyCode!=13 :( 我也尝试在 KeyHandler 中处理 Enter 键功能..但即使在我处理它之后它仍然按下 Enter 键... @GAC - 我添加了我用来测试我建议的页面。我在服务器模式下运行它。提交表单的唯一输入是焦点位于第三个输入时。试试看。 嗨@MrCakaShaunCurtis,很抱歉很晚才回复...我已经尝试了一切我似乎无法使这个特定代码'onkeypress =“return event.keyCode!= 13”'工作... :( 但非常感谢您的回复和帮助...我最终使用 EditContext 并手动触发按钮单击时的验证方法,使用类型按钮而不是类型提交...再次谢谢谢谢! !!!

以上是关于如何在使用 Blazor <InputText> 时禁用 ENTER 键按下提交按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Blazor 中使用 alert()、confirm() 和 prompt() 函数?

如何在使用 Blazor <InputText> 时禁用 ENTER 键按下提交按钮

如何在 Blazor 中使用引导转换 .collapse

如何使用 Blazor 更改 div 元素的类

如何在 blazor 页面上使用用户管理器?

如何在 Blazor 中以两种方式绑定级联值?