Blazor - change text inside input - input

Question

I am building the number input component in blazor an i just can't figure it out how to prevent the input to change on mousewheeel up/down. I have parameter 'DisableMouseWheel' in if true i want to prevent the number input for going up or down if mouse wheel is turned. If 'DisableMouseWheel' is true and the mouse wheel is turned it does skip the StepUp/StepDown methods but still change the value. Is there any options to solve this without javascript
I use also the 'Disabled' and 'Readonly' parameters for the input
My code
<input type="number"
step="1"
disabled="#Disabled"
readonly="#Readonly"
#onmousewheel="#OnMouseWheel"
#onwheel="#OnMouseWheel"
#bind-value="#_value" />
protected async Task OnMouseWheel(WheelEventArgs args)
{
if (DisableMouseWheel == false)
{
if (args.ShiftKey || Disabled || Readonly)
return;
if (args.DeltaY > 0)
{
await StepUp();
}
else
{
await StepDown();
}
} else
{
args.DeltaY = 0;
}
}
EDIT --> SOLUTION:
In this case i need to disable the #onkeydown:preventDefault and then handle everything in onkeydown event

Answer 1

You can use #oninput event of the checkbox. I implemented your code with that, and it works correctly.
<input type="checkbox" #oninput="ChangeMouseWheel"/>prevent the input to change on mouse wheel
<br/>
<input type="number"
step="1"
disabled="#Disabled"
readonly="#Readonly"
#onmousewheel="#OnMouseWheel"
#onwheel="#OnMouseWheel"
#bind-value="#_value"/>
#code section:
#code
{
bool DisableMouseWheel,Disabled,Readonly;
int _value=0;
protected async Task ChangeMouseWheel(ChangeEventArgs e)
{
DisableMouseWheel = (bool)e.Value;
//StateHasChanged();
}
protected async Task OnMouseWheel(WheelEventArgs args)
{
if (DisableMouseWheel == false)
{
if (args.ShiftKey || Disabled || Readonly)
return;
if (args.DeltaY > 0)
{
await StepDown();
}
else
{
await StepUp();
}
} else
{
args.DeltaY = 0;
}
}
protected async Task StepUp()
{
_value++;
}
protected async Task StepDown()
{
_value--;
}
}