blocks|key|1909391|text|在某些平台上，当文本控件聚焦时，点击"enter“键就会隐式地提交表单隐式提交模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1909392|因为您的表单只有一个输入元素，所以最优雅的解决方案是将此模式作为UX用于您的数据输入。你应该考虑一下accessibility.|style|BOLD|1909393|我在try.mudblazor中发布了一个示例|1909394|​|1909395|📷|atomic|1909396|1909397|源代码：|1909398|<MudPaper+Class="pa-4">
++++<EditForm+Model="@model"+OnValidSubmit="OnValidSubmit">
++++++++<MudTextField+
++++++++++++@bind-Value="@model.Name"+
++++++++++++Immediate="true"+
++++++++++++Label="Some+Text+and+press+enter"+/>
++++</EditForm>
</MudPaper>

<ul>
@foreach(var+s+in+history)
{
++++<li>@s</li>
}
</ul>

@code+{+
++++public+class+MyTask
++++{
++++++++public+string+Name+{get;+set;}+=+default!;
++++}
++++
++++List<string>+history+=+new+List<string>();

++++MyTask+model+=++new+MyTask(){Name="hi"};

++++private+void+OnValidSubmit()
++++{
++++++++history.Add(model.Name);
++++++++model.Name+=+"";
++++++++StateHasChanged();
++++}

}|code-block|syntax|javascript|1909399|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission|1|https://try.mudblazor.com/snippet/mkGwEpbUQyHVPyrg|2|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/a518fa62551b744c8a871486e49d57c2.gif|imageAlt^0|Z|4|0|0|1E|D|0|2|D|1|0|0|0|1|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|J|3|K|5|6|7|1N|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|O|3|K|5|6|7|1S|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1T|8|@]|9|@]|C|$]]|$1|R|3|S|5|T|7|1U|8|@]|9|@]|C|$U|V]]|$1|W|3|-4|5|6|7|1V|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|17|10|18|C|$19|1A|1B|-4]]]]

On some platforms, hitting the &quot;enter&quot; key while a text control is focused implicitly submits the form, the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission" rel="nofollow noreferrer">implicit submission</a> pattern.
Because your form only has one input element, maybe, the most elegant solution is to use this pattern as UX for your data entry. You should to think on accessibility.
I post a sample in <a href="https://try.mudblazor.com/snippet/mkGwEpbUQyHVPyrg" rel="nofollow noreferrer">try.mudblazor</a>:
<a href="https://i.stack.imgur.com/wIk2w.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wIk2w.gif" alt="enter image description here" /></a>
The source code:
<pre><code>&lt;MudPaper Class=&quot;pa-4&quot;&gt;
 &lt;EditForm Model=&quot;@model&quot; OnValidSubmit=&quot;OnValidSubmit&quot;&gt;
 &lt;MudTextField 
 @bind-Value=&quot;@model.Name&quot; 
 Immediate=&quot;true&quot; 
 Label=&quot;Some Text and press enter&quot; /&gt;
 &lt;/EditForm&gt;
&lt;/MudPaper&gt;

&lt;ul&gt;
@foreach(var s in history)
{
 &lt;li&gt;@s&lt;/li&gt;
}
&lt;/ul&gt;

@code { 
 public class MyTask
 {
 public string Name {get; set;} = default!;
 }
 
 List&lt;string&gt; history = new List&lt;string&gt;();

 MyTask model = new MyTask(){Name=&quot;hi&quot;};

 private void OnValidSubmit()
 {
 history.Add(model.Name);
 model.Name = &quot;&quot;;
 StateHasChanged();
 }

}
</code></pre>

blocks|key|1920995|text|您可以通过遵循路径MudBlazor/src/MudBlazor.UnitTests.Viewer/TestComponents/TextField/+https://github.com/MudBlazor/MudBlazor找到此示例和其他示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1920996|此代码*.razor：|1920997|<MudTextField+@bind-Value="value"+
++++++++++++++Immediate="true"+OnKeyDown="OnKeyDown"+
++++++++++++++Label="Hit+Enter+to+Clear"+
++++++++++++++TextUpdateSuppression="false">
</MudTextField>
 
value:+@(value)

@code+{
++string+value;

++async+void+OnKeyDown(KeyboardEventArgs+args)+
++{
++++if+(args.Key=="Enter")+
++++{
++++++++await+Task.Delay(100);
++++++++value+=+"";
++++++++StateHasChanged();
++++}
++}
}|code-block|syntax|javascript|1920998|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MudBlazor/MudBlazor^0|9|1U|24|12|0|0|4|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You can find this and other examples by following the path MudBlazor/src/MudBlazor.UnitTests.Viewer/TestComponents/TextField/
<a href="https://github.com/MudBlazor/MudBlazor" rel="nofollow noreferrer">https://github.com/MudBlazor/MudBlazor</a>
This code *.razor for you:
<pre><code>&lt;MudTextField @bind-Value=&quot;value&quot; 
 Immediate=&quot;true&quot; OnKeyDown=&quot;OnKeyDown&quot; 
 Label=&quot;Hit Enter to Clear&quot; 
 TextUpdateSuppression=&quot;false&quot;&gt;
&lt;/MudTextField&gt;
&lt;br&gt;
&lt;span&gt;value: @(value)&lt;/span&gt;

@code {
 string value;

 async void OnKeyDown(KeyboardEventArgs args) 
 {
 if (args.Key==&quot;Enter&quot;) 
 {
 await Task.Delay(100);
 value = &quot;&quot;;
 StateHasChanged();
 }
 }
}
</code></pre>

blocks|key|1055552|text|任何在今天之后发现这一点的人都需要TextUpdateSuppression=false控件上的MudTextInput|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1055553|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Anyone finding this after today you need the TextUpdateSuppression=false on the MudTextInput control

blocks|key|1055577|text|我已经找到了一个解决方案，它不受永久TextUpdateSuppression=true导致的字符吞咽错误的影响。动态禁用该属性并在短时间延迟后重新设置该属性完成了此任务。我使用的是MudBlazor，但假设这适用于普通的Blazor组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1055578|<MudTextField+@ref="RefEntryField"+@bind-Value="TextChatValue"+Immediate="true"+OnKeyDown="OnTextChatSend"+/>|code-block|syntax|javascript|1055579|@code+{
++++private+MudTextField<string>+RefEntryField;
++++private+string+_textChatValue;
}|1055580|private+async+Task+OnTextChatSend(KeyboardEventArgs+args)
++++{
++++++++if+(args.Key+is+"Enter"+or+"NumppadEnter")
++++++++{
++++++++++++RefEntryField.TextUpdateSuppression+=+false;
++++++++++++
++++++++++++//+Process+input,+etc.

++++++++++++TextChatValue+=+string.Empty;
++++++++++++await+InvokeAsync(StateHasChanged);
++++++++++++await+Task.Run(async+()+=>
++++++++++++{
++++++++++++++++await+Task.Delay(150);
++++++++++++++++RefEntryField.TextUpdateSuppression+=+true;
++++++++++++});
++++++++}
++++}|1055581|entityMap^0|I|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|H|7|U|8|@]|D|@]|E|$I|J]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

I have found a solution that does not suffer from the character-swallowing bug that a permanent <code>TextUpdateSuppression=true</code> results in. Dynamically disabling the property and resetting it after a short delay did the trick. I am using MudBlazor but assumes this works with a regular Blazor component.
<pre><code>&lt;MudTextField @ref=&quot;RefEntryField&quot; @bind-Value=&quot;TextChatValue&quot; Immediate=&quot;true&quot; OnKeyDown=&quot;OnTextChatSend&quot; /&gt;
</code></pre>
<pre><code>@code {
 private MudTextField&lt;string&gt; RefEntryField;
 private string _textChatValue;
}
</code></pre>
<pre><code>private async Task OnTextChatSend(KeyboardEventArgs args)
 {
 if (args.Key is &quot;Enter&quot; or &quot;NumppadEnter&quot;)
 {
 RefEntryField.TextUpdateSuppression = false;
 
 // Process input, etc.

 TextChatValue = string.Empty;
 await InvokeAsync(StateHasChanged);
 await Task.Run(async () =&gt;
 {
 await Task.Delay(150);
 RefEntryField.TextUpdateSuppression = true;
 });
 }
 }
</code></pre>

I am using Mudblazor component TextField in my Blazor Server project.
I want to clear the TextField after I press &quot;Enter&quot;
Here is my code in my Index.Razor :
@page :
<pre><code>&lt;MudTextField class=&quot;pa-4&quot; @bind-Value=&quot;newTodayTask&quot; Clearable=&quot;true&quot;
OnKeyUp=&quot;AddTodayTask&quot; Adornment=&quot;Adornment.End&quot; AdornmentIcon=&quot;@Icons.Outlined.Add&quot;
FullWidth=&quot;false&quot; Placeholder=&quot;Create a new task here, press Enter ↵ to save&quot; Variant=&quot;Variant.Text&quot; 
Style=&quot;width:600px; margin-bottom:10px&quot;&gt;&lt;/MudTextField&gt;
</code></pre>
@code :
<pre><code>public string newTodayTask { get; set; }

protected async Task AddTodayTask(KeyboardEventArgs e)
{
 if(e.Key == &quot;Enter&quot;)
 {
 if (!string.IsNullOrWhiteSpace(newTodayTask))
 {
 var result = false; 
 var todaytask = new TodayTaskModel { TaskName = newTodayTask, DueDate = dueDate, TaskCreatedBy = taskCreatedBy};
 result = await Service.CreateTodayTask(todaytask);
 StateHasChanged();
 newTodayTask = string.Empty;

 }

 }
 OnInitialized(); 
}
</code></pre>
I already try with string.Empty; and StateHasChanged(); but still not works.
I really appreciate any help that can provide. Thanks

Mudblazor clear TextField after "Enter"

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在我的Blazor项目中使用了Mudblazor组件TextField。在按下"Enter“后，我想清除TextField下面是我的Index.Razor中的代码：@网页：<MudTextField class="pa-4" @bind-Value="newTodayTask" Clearable="true"OnK...

问穆德布拉佐尔在“进入”后清除TextField
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问穆德布拉佐尔在“进入”后清除TextFieldEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问穆德布拉佐尔在“进入”后清除TextField
EN