防止在 Blazor 中输入非数字
Prevent non-digits from being typed into the input in Blazor
在 Blazor 应用程序中，我有一个 <input type="text" />，我正在尝试做一些事情，以便无法在其中输入非数字字符。
这是我目前所做的，它似乎工作得很好：
<input type="text" @bind="InputContent" @bind:event="oninput" />
@code {
string inputContent;
string InputContent
{
get => inputContent;
set => inputContent = StripNonDigits(value);
}
string StripNonDigits(string str)
{
return new String(str.Where(c => char.IsDigit(c)).ToArray());
}
}
现在，我想知道：
- 还有哪些其他方法可以实现这一目标：“特别是在 Blazor 中，监视并可能修改用户输入的内容。”例如，这可以在不使用
@bind 的情况下实现吗？
- 我这样做的方式是否存在潜在问题？还是最优解？
在 JS 中，做同样的事情，你会监听 oninput 事件，如果输入的字符不是数字，那么你会做一个 event.preventDefault()。据我所知，您不能在 Blazor 中完全做到这一点，对吗？
也许验证的事情对你有帮助？
通常它在提交时触发，但这里描述了如何使用继承自 InputText 的新输入组件在输入时触发：link
> @* Inherits from the original InputText component *@
@inherits InputText
@* Bind the oninput event *@
<input @attributes="AdditionalAttributes"
class="@CssClass"
value="@CurrentValue"
@oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />
然后你可以使用正则表达式来不允许数字：
@using System.ComponentModel.DataAnnotations;
<EditForm Model="example">
<DataAnnotationsValidator />
<ValidationSummary />
<InputTextOnInput @bind-Value="example.Name"></InputTextOnInput>
<button type="submit">Submit</button>
</EditForm>
@code {
public class ExampleModel
{
[Required]
[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",
ErrorMessage = "Characters are not allowed.")]
public string Name { get; set; }
}
public ExampleModel example = new ExampleModel();
}
不可靠的解决方案：
这就是为什么 @enet 提出的解决方案实际上非常不可靠、有缺陷、低效且天真。 + 为什么他声称我的解决方案有问题实际上是错误的。
更新：他删除了他的回答。
首先，他的解决方案不优雅的原因：
原因一：无法阻止快捷键复制粘贴(Ctrl/CMD + V)
暂无评论：
原因 2：无法通过上下文菜单阻止复制粘贴（右键单击 => 粘贴）
暂无评论：
原因3：无法防止文本拖放
暂无评论：
原因 4：仅适用于英文数字
暂无评论：
原因 5：文本中间不可编辑 （重要！）
暂无评论：
注意：您可以在此 fiddle 中亲眼看到所有这些行为：https://blazorfiddle.com/s/xfik4hnq
原因 6：使用 RegEx
RegEx 速度慢、效率低，而且通常难以阅读和解析。因此应尽可能避免。
原因 7：更复杂但更不优雅
说真的，没有评论，很明显。
原因 8：需要更多代码行
仅考虑@code 部分，@enet 提出的这个解决方案大约有 23 行代码，而我的大约有 12 行。（都考虑了一行中的大括号等）
注意：同样重要的是要记住，如果这个解决方案几乎和我最初提出的那个一样稳健（我将在稍后解释），它必须解决每一个问题刚刚演示的问题之一，为了做到这一点，它必须变得比现在复杂得多，并且还需要更多的代码行。
最优解：
这就是为什么我最初在我的原始问题中提出的解决方案是最优化和最优雅的解决方案；
解决了上述问题的ALL，并且在更少的行中也解决了代码 + 更容易理解、更短、更好、更简单的代码。
与此同时，另一方提出的支持另一个解决方案但反对我的解决方案的唯一论点是，我的解决方案导致不允许的字符出现几分之一秒，然后消失。但是，在我的任何测试中都没有观察到这一点。
这是演示这一点的 GIF：
每当我按下键盘上的一个键时，您可以在控制台上看到一条消息，如“按下键：a”，但同时，您会看到该字符没有在输入中完全没有出现：
在 Blazor 应用程序中，我有一个 <input type="text" />，我正在尝试做一些事情，以便无法在其中输入非数字字符。
这是我目前所做的，它似乎工作得很好：
<input type="text" @bind="InputContent" @bind:event="oninput" />
@code {
string inputContent;
string InputContent
{
get => inputContent;
set => inputContent = StripNonDigits(value);
}
string StripNonDigits(string str)
{
return new String(str.Where(c => char.IsDigit(c)).ToArray());
}
}
现在，我想知道：
- 还有哪些其他方法可以实现这一目标：“特别是在 Blazor 中，监视并可能修改用户输入的内容。”例如，这可以在不使用
@bind的情况下实现吗？ - 我这样做的方式是否存在潜在问题？还是最优解？
在 JS 中，做同样的事情，你会监听 oninput 事件，如果输入的字符不是数字，那么你会做一个 event.preventDefault()。据我所知，您不能在 Blazor 中完全做到这一点，对吗？
也许验证的事情对你有帮助？ 通常它在提交时触发，但这里描述了如何使用继承自 InputText 的新输入组件在输入时触发：link
> @* Inherits from the original InputText component *@ @inherits InputText @* Bind the oninput event *@ <input @attributes="AdditionalAttributes" class="@CssClass" value="@CurrentValue" @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />
然后你可以使用正则表达式来不允许数字：
@using System.ComponentModel.DataAnnotations;
<EditForm Model="example">
<DataAnnotationsValidator />
<ValidationSummary />
<InputTextOnInput @bind-Value="example.Name"></InputTextOnInput>
<button type="submit">Submit</button>
</EditForm>
@code {
public class ExampleModel
{
[Required]
[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",
ErrorMessage = "Characters are not allowed.")]
public string Name { get; set; }
}
public ExampleModel example = new ExampleModel();
}
不可靠的解决方案：
这就是为什么 @enet 提出的解决方案实际上非常不可靠、有缺陷、低效且天真。 + 为什么他声称我的解决方案有问题实际上是错误的。
更新：他删除了他的回答。
首先，他的解决方案不优雅的原因：
原因一：无法阻止快捷键复制粘贴(Ctrl/CMD + V)
暂无评论：
原因 2：无法通过上下文菜单阻止复制粘贴（右键单击 => 粘贴）
暂无评论：
原因3：无法防止文本拖放
暂无评论：
原因 4：仅适用于英文数字
暂无评论：
原因 5：文本中间不可编辑 （重要！）
暂无评论：
注意：您可以在此 fiddle 中亲眼看到所有这些行为：https://blazorfiddle.com/s/xfik4hnq
原因 6：使用 RegEx
RegEx 速度慢、效率低，而且通常难以阅读和解析。因此应尽可能避免。
原因 7：更复杂但更不优雅
说真的，没有评论，很明显。
原因 8：需要更多代码行
仅考虑@code 部分，@enet 提出的这个解决方案大约有 23 行代码，而我的大约有 12 行。（都考虑了一行中的大括号等）
注意：同样重要的是要记住，如果这个解决方案几乎和我最初提出的那个一样稳健（我将在稍后解释），它必须解决每一个问题刚刚演示的问题之一，为了做到这一点，它必须变得比现在复杂得多，并且还需要更多的代码行。
最优解：
这就是为什么我最初在我的原始问题中提出的解决方案是最优化和最优雅的解决方案；
解决了上述问题的ALL，并且在更少的行中也解决了代码 + 更容易理解、更短、更好、更简单的代码。
与此同时，另一方提出的支持另一个解决方案但反对我的解决方案的唯一论点是，我的解决方案导致不允许的字符出现几分之一秒，然后消失。但是，在我的任何测试中都没有观察到这一点。
这是演示这一点的 GIF：
每当我按下键盘上的一个键时，您可以在控制台上看到一条消息，如“按下键：a”，但同时，您会看到该字符没有在输入中完全没有出现：