How to set input box value to a string in Blazor WebAssembly?

Question

I am using Blazor WebAssmebly. I have an input box and I simply want to reset it to no text after the user types in text and hits the Enter key:

private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
    value = (string)args.Value;
}

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
        if (value.Trim() != "")
        {
            doSomething();
        }
    }
}

So I set the variable 'value' to the input text, but then I want to clear the text box. How do I do that?

enet · Accepted Answer · 2021-11-08 18:49:37Z

3

It looks like as if you're not binding your input to the value variable. Your code should be something like this:

 <input id="txtWord" name="txtWord" placeholder="Enter your text" 
  value ="@value" @onchange="onChange" @onkeyup="Enter" />

@code
{
    private string value;
}

Note that by adding the value attribute to the input element I create a two-way databinding, from the variable to the control, and from the control to the variable. When you use the @onchange directive, you create a one-way data binding.

In order to reset the input element, you can do the following:

if (value.Trim() != "")
{
     // I guess it is here that you want to reset the input 
     // element. Assigning empty string to the `value` variable
     // will cause the control to re-render with the new value; 
     // that is empty string...
     value = "";
     doSomething();
}

answered Nov 8, 2021 at 18:49

enet

46.4k6 gold badges103 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

E.D. Over a year ago

perfect, thx !!

Brian Parker Over a year ago

Another way to do this is wrap the input in a form the form handles the Enter event.

Brian Parker · Accepted Answer · 2021-11-09 04:55:20Z

This will handle "enter" and "Submit" button press. I use this in a SignalR library I am developing. The default css classes are for Bootstrap.

SendBox.razor

<EditForm Model="@SendBoxViewModel" OnSubmit="@Send">

    <div class="@DivClass">

        <input @ref="@inputBox"
               @bind-value="SendBoxViewModel.InputMessage"
               @bind-value:event="oninput"
               type="text"
               aria-label="@Placeholder"
               placeholder="@Placeholder"
               class="@InputClass"
               aria-describedby="button-send"
               disabled=@Disabled>

        <button class="@ButtonClass"
                type="submit"
                id="button-send"
                disabled=@Disabled>
            @Label
        </button>

    </div>

</EditForm>

SendBox.razor.cs

public partial class SendBox : ComponentBase
{
    private ElementReference inputBox;

    [Parameter]
    public string Label { get; set; } = "Send";

    [Parameter]
    public string Placeholder { get; set; } = "Type a new message here.";

    [Parameter]
    public string DivClass { get; set; } = "input-group";

    [Parameter]
    public string InputClass { get; set; } = "form-control";

    [Parameter]
    public string ButtonClass { get; set; } = "btn btn-outline-primary";

    [Parameter]
    public bool Disabled { get; set; }

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

    public SendBoxViewModel SendBoxViewModel { get; set; } = new SendBoxViewModel();

    private bool MessageInputInvalid => string.IsNullOrWhiteSpace(SendBoxViewModel.InputMessage);
    private async Task Send()
    {
        if (!MessageInputInvalid)
        {
            await OnSend.InvokeAsync(SendBoxViewModel.InputMessage);
            SendBoxViewModel.InputMessage = string.Empty;
            await inputBox.FocusAsync();
        }
    }
}

SendBoxViewModel.cs

public class SendBoxViewModel
{
    [MinLength(length: 1)]
    [MaxLength(length: 1024)]
    [Required(AllowEmptyStrings = false)]
    public string? InputMessage { get; set; }
}

Collectives™ on Stack Overflow

How to set input box value to a string in Blazor WebAssembly?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related