Custom attribute in input container of SfTextBox

[Luca]

Hi Syncfusion Team!

How can add a custom attribute to the sftextbox?

I have this code:

<SfTextBox @bind-Value="@Value"  
		   HtmlAttributes="@(new() {{"data-myattribute","customvalue"} })"
		   CssClass="@Css"
		   Enabled="@Enabled"
		   FloatLabelType="FloatLabelType.Always"
		   Placeholder="@Placeholder">
</SfTextBox>

And produce this html

<div class="tk-textbox e-input-group e-control-container e-control-wrapper e-float-input" 
	 style="width:;" 
	 _bl_4="">
		<input id="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   autocomplete="on" 
			   type="text" 
			   class="e-control e-textbox e-lib" 
			   name="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   role="textbox" 
			   tabindex="0" 
			   aria-labelledby="label_textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   aria-disabled="false" 
			   data-myattribute="customvalue" <-----THIS ROW 
			   _bl_5="">
					<!--!-->
					<span class="e-float-line"></span>
		 <label class="e-float-text e-label-top" 
			    id="label_textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
				for="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb">
				Nome utente
		 </label>
</div>

The attribute "data-myattribute" is in the input tag but i need the attribute into the parent input container like this

 
<div class="tk-textbox e-input-group e-control-container e-control-wrapper e-float-input" 
	 style="width:;" 
	 _bl_4=""
	 data-myattribute="customvalue" <-----THIS ROW
>

		<input id="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   autocomplete="on" 
			   type="text" 
			   class="e-control e-textbox e-lib" 
			   name="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   role="textbox" 
			   tabindex="0" 
			   aria-labelledby="label_textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
			   aria-disabled="false" 
			   
			   _bl_5="">
					<!--!-->
					<span class="e-float-line"></span>
		 <label class="e-float-text e-label-top" 
			    id="label_textbox-35d45151-5bf2-4605-a9b4-521590afdaeb" 
				for="textbox-35d45151-5bf2-4605-a9b4-521590afdaeb">
				Nome utente
		 </label>
</div>

Thanks!

[UdhayaKumar Duraisamy]

Hi Luca,

We can achieve the requested requirement using JSInterop and created event as like in the below code snippet. Please refer to the below sample for more details.

[Index.razor]

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime;

 

<SfTextBox ID="textbox" @bind-Value="@Value" FloatLabelType="FloatLabelType.Always" Created="@CreatedHandler" Placeholder="Name"></SfTextBox>

 

@code {

 

    public string Value = "Syncfusion";

    private async Task CreatedHandler(Object args)

    {

        await JSRuntime.InvokeAsync<object>("addAttribute");

    }

}

[script]

function addAttribute()

        {

            document.getElementsByClassName('e-input-group e-control-container')[0].setAttribute("data-myattribute", "customvalue");

        }

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_(2)1480656544

Kindly try the above suggestion and let us know if this meets your requirement. If we misunderstood the requirement, we request you to provide additional details about the requirement as mentioned below. This will help us validate the requirement further and provide you with a better solution.

1. Exact Requirement details.
2. Requirement use case scenario.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D

[Luca]

Thank you

in the example it adds the attribute to first textbox. 

What if I want to add it to a specific textbox?

[UdhayaKumar Duraisamy]

Hi Luca,

We can add the attributes to the specific textbox as mentioned in the below code snippet. Please refer to the sample for more details.

[Index.razor]

@page "/"

 

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime;

 

<SfTextBox ID="textbox1" @bind-Value="@Value1" FloatLabelType="FloatLabelType.Always" Created="@CreatedHandler1" Placeholder="Name"></SfTextBox>

 

<SfTextBox ID="textbox2" @bind-Value="@Value2" FloatLabelType="FloatLabelType.Always" Created="@CreatedHandler2" Placeholder="Name"></SfTextBox>

 

@code {

 

    public string Value1 = "Syncfusion";

    public string Value2 = "Syncfusion";

    private async Task CreatedHandler1(Object args)

    {

       

    }

    private async Task CreatedHandler2(Object args)

    {

        await JSRuntime.InvokeAsync<object>("addAttribute2");

    }

}

[script]

function addAttribute2()

        {

            document.getElementsByClassName('e-input-group e-control-container')[1].setAttribute("data-myattribute", "customvalue");

        }

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox1233804722

Kindly try the above suggestion and let us know if this meets your requirement.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D