Call function after input in textbox

Question

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" class="form-control" 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?

Have you seen this? https://stackoverflow.com/a/60666336/6621862 — Luke, Sep 27 '22 at 17:05

Dimitris Maragkos · Answer 1 · 2022-09-27T17:43:31.390

Use can use @onfocusout instead of @oninput:

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

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

Or:

<input type="text" class="form-control" 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" class="form-control" name="fileSelector" id="fileSelector" 
    value="@FileFilter.PathName" 
    @onchange="GetExtensions" />

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

score 0 · Answer 2 · answered Sep 27 '22 at 17:22

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:

Call function after input in textbox

2 Answers2