Преобразовать текст, чтобы всегда быть в верхнем регистре в Blazor - PullRequest
Новая
       0

Преобразовать текст, чтобы всегда быть в верхнем регистре в Blazor

0 голосов
/ 12 марта 2020

Я пытаюсь сделать так, чтобы мой вводимый текст всегда был в верхнем регистре в текстовом поле ввода. Я попытался создать собственный InputText, как показано ниже, но он не обновляет привязку (отображается в верхнем регистре, но не привязывается как таковой). Что я здесь не так делаю? Есть ли лучший способ? 

@inherits InputText

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

Ответы [ 3 ]

0 голосов
/ 12 марта 2020

Для простоты и (на мой взгляд) причин UX, давайте предположим, что пользователю разрешено вводить строчные буквы, но приложение будет обрабатывать ввод после того, как они покинут это поле.

Сначала создайте новый компонент, чтобы мы могли повторно использовать логи c. Я назвал мой 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";
}

В этом примере в качестве начального текста у меня есть «Начальный», который будет напечатан внутри текстового поля. Как только вы оставите элемент, текст внутри него будет преобразован в верхний регистр.

Преимущество использования компонента состоит в том, что вы можете сделать стандартный @bind- со своими свойствами.

0 голосов
/ 13 марта 2020

Простота у меня работает. 

<input type="text" oninput="this.value=this.value.toUpperCase()" @bind=CurrentValueAsString />
0 голосов
/ 12 марта 2020

Я использовал старую ссылку на вход, который вызывал ошибку. Хотя в коде была ошибка (если ввод был нулевым). Исправленную версию можно посмотреть здесь: 


@inherits InputText

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