1. Home
  2. Forum
  3. Blazor
  4. Progamatically clear textbox

Progamatically clear textbox

I need to clear the textbox  from my code.  Any ide


17 Replies
DR Deepak Ramakrishnan Syncfusion Team October 28, 2021 10:35 AM UTC

Hi Dale, 
  
 
Greetings from Syncfusion support. 
  
 
Yes we can achieve your requirement by setting null value to the field mapped to ‘@bind-Value’ property . Kindly refer the below code snippet and sample for your reference. 
  
 
[Index.razor] 
@using Syncfusion.Blazor.Inputs 
 
 
<SfTextBox @bind-Value="@val"></SfTextBox> 
 
<br /> 
<br /> 
<button @onclick="clickAction">Clear All</button> 
 
@code{ 
 
    public string val { get; set; } = "Hello World"; 
 
 
    public void clickAction() 
    { 
        this.val = null; 
    } 
 
 
} 
 
 
 
 
 
Thanks, 
 
Deepak R. 


DA Dale October 29, 2021 01:02 AM UTC

My situation is a bit different than that.

What I'm going is using the TextBox to allow users to enter commands to be processed.  After I process them I want to clear the textbox for the next command.  So I need to clear the input while inside the Input handler and/or the @onkeypress handler.


<SfTextBox @ref="@sfTextBox" @bind-Value="@NavString" Input="@NavInputHandler" @onkeypress="@KeyPressHandler"></SfTextBox>


private async void NavInputHandler(InputEventArgs args)

{

    NavCurrentVal = args.Value;

   // potentially process and clear input

}


        private async Task KeyPressHandler(KeyboardEventArgs args)

        {

            if (args.Key == "Enter")

            {

                 // process  NavCurrentVal and clear input

                NavString = null;

            }

        }


DA Dale October 29, 2021 02:59 AM UTC

A more complete example.  Press Z and the "Z pressed" message appears.  The Z should be erased from the textbox but is not.

@page "/test"

@using Syncfusion.Blazor.Inputs

<h3>Test</h3>

@message

<SfTextBox @bind-Value="@val" @onkeypress="@KeyPressHandler" Input="@NavInputHandler" ></SfTextBox>

<br />

<br />

<button @onclick="clickAction">Clear All</button>

@code {

    public string val { get; set; }

    private string NavCurrentVal { get; set; }

    private string message { get; set; }

    public void clickAction()

    {

        this.val = null;

    }

    private async Task KeyPressHandler(KeyboardEventArgs args)

    {

        if (args.Key == "Enter")

        {

            // process val and clear input

            NavCurrentVal = null;

            val = null;

        }

    }

    private async void NavInputHandler(InputEventArgs args)

    {

        NavCurrentVal = args.Value;


        switch (NavCurrentVal)

        {


            case "Z":

                // do some work

                message = "Z pressed";

                NavCurrentVal = null;

                val = null;

                break;


            default:

                break;

        }

    }

}


DR Deepak Ramakrishnan Syncfusion Team October 29, 2021 12:51 PM UTC

Hi Dale, 
 
Greetings from Syncfusion support. 
 
We have created a sample based on your requirement . In the provided sample from your end , You have tried to null the value before it get set to control that’s the problem causing factor at your end .So now we have modified it with native keyup event to overcome the issue. Kindly refer the below sample and code for your reference 
 
 
@using Syncfusion.Blazor.Inputs 
 
<h3>Test</h3> 
 
@message 
 
<SfTextBox @bind-Value="@val" @onkeyup="@KeyPressHandler" Input="NavInputHandler"></SfTextBox> 
 
<br /> 
 
<br /> 
 
<button @onclick="clickAction">Clear All</button> 
 
@code { 
 
    public string val { get; set; } 
 
    private string NavCurrentVal { get; set; } 
 
    private string message { get; set; } 
 
    public void clickAction() 
 
    { 
        this.val = null; 
    } 
 
    private async Task KeyPressHandler(KeyboardEventArgs args) 
 
    { 
        if (args.Key == "Enter" || args.Key == "Z") 
 
        { 
            val = null; 
        } 
        await Task.CompletedTask; 
    } 
 
    private async void NavInputHandler(InputEventArgs args) 
 
    { 
        if (args.Value == "Z") 
        { 
            val = args.Value; 
        } 
        await Task.CompletedTask; 
    } 
} 
 
 
 
 
Thanks, 
Deepak R. 
 


WM Walter Martin February 18, 2022 02:49 PM UTC

I open again this issue because I have a similar situation and what I read is not a solution for me.

I have 5 textboxes and in the first four textboxes I need to capture the text typed and when the customer click on "enter" I move the focus on the next textbox

I handle this succcessfully using this piece of code:

<SfTextBox @ref="centroref" @bind-Value="@SelectedData.CentroId" OnChange="OnChangeCentro" Width="50px" Placeholder="Rep.Id" FloatLabelType="FloatLabelType.Always"></SfTextBox>

 

        public async Task OnChangeCentro(Microsoft.AspNetCore.Components.ChangeEventArgs args)

        {

            await oreref.FocusIn(); //Move focus to the next textbox

        }

When I arrive to the last textbox, I need to capture the "enter" key because on that event I have to save all the data in the database so, in this textbox the customer is free to type chars if necessary or press only the Enter key.

To hande this I need to use the @onpresskey event but after pressing the enter key and saving the data in the database the textbox keeps surprisingly the old content even if I try to clear it in this way:

//Last textbox

<SfTextBox @ref="noteref" @bind-Value="@SelectedData.TtrapNote" @onkeypress="@OnInputNote"  Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox>


        public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

        {

            if (args.Key == "Enter")

            {

                SelectedData.TtrapNote = notetext;

                await Save(); //sava data in the DB

                notetext = "";

                noteref.Value = null;

                await Task.CompletedTask;

            }

            else

                notetext += args.Key;

        }


I can't use the @Onkeyup approach because when I arrive to the last textbox, the "enter" key is the last key pressed and the  OnInputNote event is immediately fired instead I'd need to wait for the next Enter key from the customer

How can I solve this ?

thanks



SP Sureshkumar P Syncfusion Team February 21, 2022 11:47 AM UTC

Hi Walter, 
 
Based on your scenario, we suggest you use our valuechange event instead of onkeypress event in the last textbox component. In that valuechange event triggers after entering the Enter key or focus out the component. So, the value change event you can get the changed value using your two-way bind variable.  
 
Find the code example here: 
SfTextBox @ref="centroref" @bind-Value="@CentroId" ValueChange="OnChangeCentro" Width="50px" Placeholder="Rep.Id" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
<SfTextBox @ref="noteref" @bind-Value="@TtrapNote" ValueChange="@OnInputNote" Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
@code { 
    SfTextBox centroref; 
    SfTextBox noteref; 
    public string CentroId { get; set; } 
    public string TtrapNote { get; set; } 
    public async Task OnChangeCentro(ChangedEventArgs args) 
    { 
        await noteref.FocusIn(); //Move focus to the next textbox 
    } 
 
    public void OnInputNote(ChangedEventArgs args) 
    { 
        var value = TtrapNote; 
        //if (args.Key == "Enter") 
        //{ 
        //    CentroId = TtrapNote; 
        //    //await Save(); //sava data in the DB 
        //    //notetext = ""; 
        //    //noteref.Value = null; 
        //    await Task.CompletedTask; 
        //} 
        ////else 
        //   // notetext += args.Key; 
    } 
} 
 
Find the screen shot for entered value. 
 
 
Regards, 
Sureshkumar P 


WM Walter Martin February 21, 2022 06:21 PM UTC

Thanks for this reply but when I arrive to the last textbox, the customer should be free to press enter leaving the textbox empty (and this will save the data in the DB) but in this case the ValueChange event is not fired




SP Sureshkumar P Syncfusion Team February 22, 2022 01:10 PM UTC

Hi Walter, 
 
You can achieve your requirement by execute your code based on args.IsInteracted argument value in the valuechange event. This argument is return as true only the value change based on interaction it will return as false value changed without interact the component. Please find the modified code example for last textbox component valuechange event. 
public void OnInputNote(ChangedEventArgs args) 
    { 
        //excecute once the enter button clicks  
        // args.IsInteracted returns false after set the two-way binding variable value as empty 
        if(args.IsInteracted) 
        { 
            var value = TtrapNote; 
            TtrapNote = ""; 
            CentroId = ""; 
        } 
    } 
 
Regards, 
Sureshkumar P 


WM Walter Martin February 23, 2022 02:00 PM UTC

Thanks for your reply but this didn't solve my case

I try to explain what is necessary to me using a sort of "if clause"

when the cursor is in the last textbox this is the code I need:

if ((textbox is empty || textbox is filled) && customer press enter)

{ 

save data in the DB 

}

In your last piece of code, the function  OnInputNote is not called in case the customer simply click on enter when the textbox is empty so I can't save data in the DB 




SP Sureshkumar P Syncfusion Team February 24, 2022 11:59 AM UTC

Hi Walter, 
 
You can achieve your requirement by onkeypress event with some conditional. Find the modified code changed below. 
 
<SfTextBox @ref="centroref" @bind-Value="@CentroId" ValueChange="OnChangeCentro" Width="50px" Placeholder="Rep.Id" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
<SfTextBox @ref="noteref" @bind-Value="@TtrapNote" ValueChange="@OnInputNote" @onkeypress="@OnInputNote" Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
@code { 
    SfTextBox centroref; 
    SfTextBox noteref; 
    public Boolean checkChangeTrigger { get; set; } = false; 
    public string CentroId { get; set; } 
    public string TtrapNote { get; set; } 
    public async Task OnChangeCentro(ChangedEventArgs args) 
    { 
        await noteref.FocusIn(); //Move focus to the next textbox 
    } 
 
    public void OnInputNote(ChangedEventArgs args) 
    { 
        //excecute once the enter button clicks 
        // args.IsInteracted returns false after set the two-way binding variable value as empty 
        if (args.IsInteracted) 
        { 
            var value = TtrapNote; 
            TtrapNote = ""; 
            CentroId = ""; 
            checkChangeTrigger = true; 
        } else 
        { 
            checkChangeTrigger = false; 
        } 
    } 
    public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args) 
    { 
        if (args.Key == "Enter" && string.IsNullOrEmpty(this.TtrapNote) && !checkChangeTrigger) 
        { 
            // excecute the function when textbox value is empty and press eneter key  
            // otherwise the textbox change event will trigger. 
 
        } 
 
    } 
} 
 
Regards, 
Sureshkumar P 


WM Walter Martin February 25, 2022 03:02 AM UTC

public void OnInputNote(ChangedEventArgs args)  is fired everytime I press any key in my side, not only when I press the Enter key and  args.IsInteracted is true so this code doesn't work



SP Sureshkumar P Syncfusion Team February 25, 2022 07:41 AM UTC

Hi Walter, 
 
In our textbox component the valuechange event triggers when press enter key or focusout the component otherwise the change event did not trigger. We suspect that you have customize the onkeypress event to add the entered value to add the textbox two-way variable. In that case the value changes every key press. So, we suggest removing if you have add the value into textbox two way variable to resolve the issue. 
 
<SfTextBox @ref="noteref" @bind-Value="@SelectedData.TtrapNote" @onkeypress="@OnInputNote"  Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
        public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args) 
        { 
            if (args.Key == "Enter") 
            { 
                SelectedData.TtrapNote = notetext; 
                await Save(); //sava data in the DB 
                notetext = ""; 
                noteref.Value = null; 
                await Task.CompletedTask; 
            } 
            else 
                notetext += args.Key; 
        } 
 
 
Regards, 
Sureshkumar P 


WM Walter Martin February 25, 2022 01:56 PM UTC

Probably there's still something not clear to me...

I'm using your code


 <td>

        <SfTextBox @ref="noteref" @bind-Value="@TtrapNote" ValueChange="@OnInputNote" @onkeypress="OnInputNote" Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox>

</td>


        public void OnInputNote(ChangedEventArgs args)

        {

            //excecute once the enter button clicks

            // args.IsInteracted returns false after set the two-way binding variable value as empty

            if (args.IsInteracted)

            {

                var value = TtrapNote;

                TtrapNote = "";

                checkChangeTrigger = true;

            }

            else

            {

                checkChangeTrigger = false;

            }

        }


        public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

        {

            if (args.Key == "Enter" && string.IsNullOrEmpty(this.TtrapNote) && !checkChangeTrigger)

            {

                // excecute the function when textbox value is empty and press eneter key

                // otherwise the textbox change event will trigger.

                SelectedData.TtrapNote = TtrapNote;

                await Save();

            }


        }


but as soon as I click on any key, the event in bold  public void OnInputNote(ChangedEventArgs args)​ is fired after the other event  public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

The bind-value is matched to a variable "TtrapNote" that never changes... why the ValueChange is fired ?


SP Sureshkumar P Syncfusion Team February 28, 2022 01:45 PM UTC

Hi Dale, 
 
We have validated the reported issue. the reported issue is not replicated from our end. please find the video representation of the validation details below with sample. 
 
 
Regards, 
Sureshkumar P 


WM Walter Martin February 28, 2022 08:07 PM UTC

Hello  Sureshkumar

thanks for the great support, even sending a video, but the problem is still there

I'm using now your complete application and I placed 2 breakpoint where you can see in the picture




I'm in the first textbox where I typed some chars and then I clicked on enter key

the cursor is moved correctly to the second texbox

Here a typed letter 'a' and this is the sequence of events fired:

public async Task OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

then 

public void OnInputNote(ChangedEventArgs args)

with args.IsInteracted = true

and then again

public void OnInputNote(ChangedEventArgs args)

with  args.IsInteracted = false

everything perfect up to now I think (even if  public void OnInputNote(ChangedEventArgs args) is fired without typing the enter key)

but now, if I click on enter key no events are fired so how can I start saving my data after typing some chars in the second textbox + enter key ?






VJ Vinitha Jeyakumar Syncfusion Team March 1, 2022 07:26 PM UTC

Hi Walter,


Currently, we are validating your reported query. we will update you the further details in two business days on or before 3rd March 2022.


Regards,

Vinitha


SP Sureshkumar P Syncfusion Team March 7, 2022 02:11 PM UTC

Hi Walter, 
 
We have modified the code example based on your request. We suspect that you have facing the enter key issue when using keyup event and change event in the same sample with multiple textbox component. We suggest you use keyup event in all textbox component as like below code.  
 
@using Syncfusion.Blazor.Inputs 
@using System.ComponentModel.DataAnnotations 
 
<SfTextBox @ref="centroref" @bind-Value="@CentroId" @onkeyup="OnChangeCentro" Width="50px" Placeholder="Rep.Id" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
<SfTextBox @ref="noteref" @bind-Value="@TtrapNote" @onkeyup="OnInputNote" Placeholder="Note" FloatLabelType="FloatLabelType.Always"></SfTextBox> 
 
@code { 
    SfTextBox centroref; 
    SfTextBox noteref; 
    public string CentroId { get; set; } 
    public string TtrapNote { get; set; } 
 
    public async Task OnChangeCentro(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args) 
    { 
        if (args.Key == "Enter") 
        { 
            await noteref.FocusIn(); //Move focus to the next textbox 
        } 
    } 
 
    public async void OnInputNote(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args) 
    { 
        if (args.Key == "Enter") 
        { 
            var value = TtrapNote; 
            // await Save(); //sava data in the DB 
            TtrapNote = ""; 
            CentroId = ""; 
            // we have called focusout because of the enter key we reset all the value from the application 
            await this.noteref.FocusOutAsync(); 
            await Task.CompletedTask; 
        } 
        else 
            TtrapNote += args.Key; 
    } 
} 
 
 
Also, please update if any issue you have facing when using keyup event. We will provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon