Call function after input in textbox-CodePudding

I currently have an input tag that will call my GetExtensions(string pathname) function but I'm trying to figure out how to only call this method after the textbox has been filled out.

<input type="text"  name="fileSelector" id="fileSelector" 
    @bind="FileFilter.PathName" 
    @oninput="@(e => GetExtensions(e.Value?.ToString()))"/>

How can I pass the value of the textbox to the function only when the textbox has been filled out / focus has been lost?

CodePudding user response：

You are looking for the @onchange EventCallback parameter. @oninput technically also works, but is called on each input that happens on the element.

I personally use a mixture of the two in my components to update my objects as the user types.

Check this BlazorFiddle: https://blazorfiddle.com/s/imbjwfzt

Code:

<input @onchange="InputChanged" @oninput="OnInput" />

<div>@_changeValue</div>

<div>@_inputValue</div>

@code {
    string _changeValue;
    string _inputValue;

    void InputChanged(ChangeEventArgs e) {
        _changeValue = e.Value?.ToString();
    }

    void OnInput(ChangeEventArgs e)
    {
        _inputValue = e.Value?.ToString();
    }
}

In your case, update your code like this:

CodePudding user response：

Use can use @onfocusout instead of @oninput:

<input type="text"  name="fileSelector" id="fileSelector" 
    @bind="FileFilter.PathName" 
    @onfocusout="GetExtensions" />

@code {
    private void GetExtensions()
    {
        // FileFilter.PathName will contain the input value
    }
}

Or:

<input type="text"  name="fileSelector" id="fileSelector" 
    @bind="FileFilter.PathName" 
    @onfocusout="() => GetExtensions(FileFilter.PathName)" />

@code {
    private void GetExtensions(string pathName)
    {        
    }
}

Or you can use @onchange but @onchange cannot be used with @bind so you have to manually update FileFilter.PathName:

<input type="text"  name="fileSelector" id="fileSelector" 
    value="@FileFilter.PathName" 
    @onchange="GetExtensions" />

@code {
    private void GetExtensions(ChangeEventArgs e)
    {
        FileFilter.PathName = e?.Value?.ToString();
    }
}