如何在使用 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 【问题描述】:我似乎无法找到一种方法来禁用 <button type="submit">
中的回车键,该 <EditForm>
包裹在 <EditForm>
中。
问题在于,在任何 blazor <InputText>
控件上,当用户按下 ENTER 键时,blazor 会激活验证和提交过程。
我也尝试过使用<button type="submit" @onkeypress="@KeyHandler" @onkeypress:preventdefault>
,但它不起作用,表单仍在继续验证并提交。
更具体地说,在我的<EditForm>
中,我正在调用一个模式对话框,其中包含一个用于搜索项目的<InputText>
,并且每次按下 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() 函数?