在 Blazor 中将文本转换为始终为大写答案

【问题标题】：Convert text to always be uppercase in Blazor在 Blazor 中将文本转换为始终为大写
【发布时间】：2020-03-12 18:36:29
【问题描述】：

我试图让我的输入文本在 blazor 输入文本字段中始终为大写。我尝试创建一个如下所示的自定义 InputText，但它没有更新绑定（显示为大写但不绑定）。我在这里做错了什么？有没有更好的办法？

@inherits InputText

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(
        this, __value => CurrentValueAsString = __value.ToUpper(), CurrentValueAsString.ToUpper())" />

【问题讨论】：

可能在设置值的时候设置服务器端属性set函数toUpper()。
是否允许用户输入小写字母，并且您将其转换为大写字母，或者您是否将输入限制为仅大写字母？如果您要进行转换，您是在输入的每个字符上还是在元素离开焦点后进行转换？
@gunr2171 任何一个都可以正常工作...这个想法是，当他们提交表单时，它们都必须是大写的。理想情况下是在键入或阻止小写输入时

标签： c# .net-core blazor

【解决方案1】：

简单对我有用。

<input type="text" oninput="this.value=this.value.toUpperCase()" @bind=CurrentValueAsString />

【讨论】：

【解决方案2】：

为了简单起见和（在我看来）用户体验的原因，我们假设允许用户输入小写字母，但应用程序会在他们离开该字段后将输入内容加满。

首先，创建一个新组件，以便我们可以重用逻辑。我打电话给我的UppercaseTextInput.razor

<input value="@UserInput" 
       @onchange="async e => await OnChange(e)" />

@code {
    [Parameter]
    public string UserInput { get; set; }

    [Parameter]
    public EventCallback<string> UserInputChanged { get; set; }

    private async Task OnChange(ChangeEventArgs e)
    {
        var upperCase = (e.Value as string).ToUpperInvariant();
        await UserInputChanged.InvokeAsync(upperCase);
    }
}

只要输入失去焦点，就会调用私有方法OnChange。将 @onchange 更改为 @oninput 以使每次击键都发生这种情况。

现在您可以在另一个页面或组件中使用该组件。例如在索引页中：

@page "/"

<h1>Hello, world!</h1>

<UppercaseTextInput @bind-UserInput="UserInput" />
<p>You typed: @UserInput</p>

@code {
    public string UserInput { get; set; } = "Initial";
}

在本例中，我将“Initial”作为起始文本，它将打印在文本框内。只要离开元素，里面的文字就会变成大写。

使用组件的好处是你可以用你的属性做一个标准的@bind-。

【讨论】：

我最初是这样做的，但是编辑时光标总是跳到结尾，所以这是不行的
@Dan 如果您使用@oninput，那么它会触发每次击键。 @onchange 将在元素的焦点消失时发生。

【解决方案3】：

我使用了对导致错误的输入的旧引用。虽然代码中有一个错误（如果输入为空）。更正后的版本可以在这里看到：


@inherits InputText

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(
        this, __value => CurrentValueAsString = __value?.ToUpper(), CurrentValueAsString?.ToUpper())" />

【讨论】：