Hi Társis,
Greetings from Syncfusion support.
We could not access the DOM element in the Blazor platform. So, we can achieve the requested requirement by calling select method in the focus event with help of JS interop as mentioned below.
Also, we can restrict the focus of the input element by pressing the TAB key by setting the TabIndex property as “-1”.
|
[index.razor]
@using Syncfusion.Blazor.Inputs
<SfNumericTextBox @ref="numericObj" ID="numeric" TValue="int?" Value="232" TabIndex="-1">
<NumericTextBoxEvents TValue="int?" Focus="OnFocus" Created="OnCreate"></NumericTextBoxEvents>
</SfNumericTextBox>
@code {
SfNumericTextBox<int?> numericObj;
[Inject]
protected IJSRuntime JsRuntime { get; set; }
public void OnCreate()
{
this.numericObj.FocusIn();
}
public async Task OnFocus(NumericFocusEventArgs args)
{
await JsRuntime.InvokeVoidAsync("onFocus", "numeric");
}
} |
|
[wwwroot/focus.js]
window.onFocus = (id) => {
var numericObj = document.getElementById(id);
numericObj.select();
} |
|
[_Host.html]
<script src="~/focus.js"></script> |
Please find the sample from the below link.
Regards,
Berly B.C
