将Blazor中的文本转换为始终大写

Question

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

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

Answer 1

简单适用于我。

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

Answer 2

这个问题的答案比所有答案都简单：它可以使用CSStext-transform: uppercase;来解决。这就是你所需要的，它不需要任何处理能力，因为它包含在浏览器的引擎中。

Answer 3

为了简单起见和(在我看来(用户体验的原因，让我们假设用户可以键入小写字母，但在他们离开该字段后，应用程序将ToUpper输入。

首先，制作一个新组件，这样我们就可以重用逻辑。我叫我的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-。

Answer 4

我使用了对输入的旧引用，这导致了错误。不过，代码中有一个错误(如果输入为null(。更正后的版本可以在这里看到：

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

Answer 5

我正在使用MudBrazor。我挠头了一会儿，为什么要添加

Style="text-transform: uppercase;"

对<MudInput>不起作用，即使使用了!important属性，也应用了默认的用户代理样式(text-transform: none;(。在我看来，C#或JS在这项任务上显得有些过头了。最终对我起作用的是添加

input {
text-transform: uppercase;
}

到站点的CSS表(在我的例子中是index.CSS(。这最终覆盖了默认的用户代理样式。