Typing Data into textbox ... need to preserve "TAB"s in data entered

[Michael Crider]

I feel this should be simple, but I need to create data that uses (and captures the tab key) .. ie, I am generating configuration and code files (Think something similar to a YAML configuration file, or indented python code blocks), and really need to efficiently capture structure based on the TAB key.

IE:

DATA

[TAB]  DATA1

[TAB]  DATA2

[TAB] [TAB]  DATA2A

The tabs are absolutely imperative. I know we could leverage spaces, but capturing tab information when the TAB key is a requirement. I have tried a number of solutions using @KeyDown event, but the examples provided don't work, or tend to be 1 step behind.

What control or techniques would provide me with the most appropriate manner to capture tabs as a "\t" (or equivalent) and not cause the browser to navigate to the next input. I realize that this requires preventing default behavior in the browser (ie @Onclick"OnKeyDown" @Onclick:preventDefault type behavior), but none of the answers I can compile, or work properly.  I have tried the textbox control, input, and the RTF control, and can't get any of them to "not" navigate at the correct moment.

Is this even possible?

Regards

Mike

[UdhayaKumar Duraisamy]

By default, pressing the Tab key will navigate the focus to the next element in the DOM based on the tab index. You can prevent this behavior in the TextBox component with the help of JS interop on the created event handler. Please refer to the code example below.

[Index.razor]

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime

 

<div style="margin: 130px auto; width: 300px">

    <SfTextBox ID="textbox" Created="@(() => onCreated("textbox"))"></SfTextBox>

</div>

 

@code {

    public void onCreated(string Id)

    {

        JSRuntime.InvokeVoidAsync("onKeyDown", Id, null);

    }

}

[Script]

function onKeyDown(id) {

            document.getElementById(id).addEventListener('keydown', function (args) {

                if (args.key === 'Tab') {

                    args.preventDefault();

                }

            })

        }

[Michael Crider]

Thank you  UdhayaKumar !!! 

That worked quite well to prevent tabbing out of the text field. Now I need to find the correct JS code to insert the "\t". While I am an 8 out of 10 in C# , but I am a 1 out of 10 on JS.

Thanks again for your assistance,

Mike

[Shereen Shajahan]

Hi Michael,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen