DEV Community

loading...
Cover image for Blazor TextBox Customization—A Complete Guide
Syncfusion, Inc.

Blazor TextBox Customization—A Complete Guide

Suresh Mohan
Suresh is a Product Manager at Syncfusion and a technology enthusiast. He helps people follow best practices in coding and in using Syncfusion controls in their applications.
Originally published at syncfusion.com on ・5 min read

Blazor TextBox is a component for editing, displaying, and adding plain text in forms to capture usernames, phone numbers, email addresses, and more. This component is an extended version of the HTML 5 TextBox (input type text) component with icons, floating labels, custom sizing, grouping, validation states, and more. This article explains how to perform customization in the Syncfusion Blazor TextBox. Here, you will learn how to easily create a new custom component using our Blazor TextBox with simple code examples.

What is a custom component?

Any component created by extending an existing component is a custom component. Using a custom component allows code reusability. Usually, a custom component is created to achieve a new level of functionality and reuse it across an application.

In a Blazor application, a Razor custom component is usually created in a shared or custom folder. Then, the custom component can be used just like other components in the HTML tag.

Prerequisites

Steps to create a custom component

1. Create a Blazor server application

First, create a Blazor server app and add the required packages by following the steps provided in the Getting Started with Syncfusion Blazor components documentation.

2. Create a custom component Razor page.

Then, create a Razor page under the Pages folder and name it CustomTextbox.razor.

Create a Razor page under the Pages folder and name it CustomTextbox

3. Add TextBox and custom properties

Now, add the Blazor TextBox component in the Razor page. By default, the TextBox has the Value, ReadOnly, Placeholder, Width, and many other properties. In addition to these, we are going to add some more custom functionalities such as casing, special characters, spaces, and value types (alphanumeric, numeric, and alphabet only).

Refer to the following code example.

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Inputs

<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width"></SfTextBox>

@code {

    public SfTextBox Textbox { get; set; }

    [Parameter]
    public CaseType TextCase { get; set; } = CaseType.Normal;

    [Parameter]
    public bool AllowSpaces { get; set; } = true;

    [Parameter]
    public bool AllowSpecialCharacters { get; set; } = true;

    [Parameter]
    public bool PreventType { get; set; }

    [Parameter]
    public CharacterType ValueType { get; set; } = CharacterType.AlphaNumeric;

    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public string CustomValue { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public string Width { get; set; }

    public enum CaseType
    {
        UpperCase,
        LowerCase,
        Normal
    }

    public enum CharacterType
    {
        AlphaNumeric,
        Numeric,
        Alpha
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Add event handlers

Now, bind the TextBox events to the new custom component, create variables with EventCallback types, and assign them to the event properties (such as CreatedEvent).

<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width" Created="CreatedEvent" ></SfTextBox>

@code {

    [Parameter]
    public EventCallback CreatedEvent { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

5. Add the custom component in the Razor page

Now, include the custom TextBox component in the Index.razor page with custom properties. Refer to the following code example.

<CustomTextbox @ref="TextboxInstance" Id="textbox" 
    TextCase="CustomTextbox.CaseType.UpperCase" PreventType="false" AllowSpaces="false" AllowSpecialCharacters="false" ValueType="CustomTextbox.CharacterType.AlphaNumeric" Placeholder="Enter a value" CreatedEvent="OnCreated" Width="200px"></CustomTextbox></div>
Enter fullscreen mode Exit fullscreen mode

6. Use JSInterop call for script processing

We validate the text using JavaScript, so invoke the JavaScript using JSInterop. First, add the JavaScript file CustomTextbox.js in the script folder and add a reference to it in the _Host.cshtm file.

Add the JavaScript file CustomTextbox.js in the script folder

[_Host.cshtm]

<head>
    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
    <script src="~/script/CustomTextbox.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

This script code handles the key down event and validates the text on typing.

var textBoxInstance;
window.validateTextBox = function (elementRef) {
    var element = document.getElementById(elementRef.id);
    textBoxInstance = elementRef;
    element.addEventListener('keydown', function (e) {
        if ((e.keyCode === 8 || e.keyCode === 46 || (e.keyCode >= 37 && e.keyCode <= 40))) {
            return
        }
        if (textBoxInstance.textCase == 0) {
            if (!/[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.textCase == 1) {
            if (!/[a-z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpaces) {
            if (e.keyCode == 32) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpecialCharacters) {
            if (!/[a-z]|[A-Z]|[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 1) {
            if (!/[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 2) {
            if (!/[a-z]|[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
    }, false);
}
Enter fullscreen mode Exit fullscreen mode

After executing the previous code examples, we’ll get output like the following screenshot.

Blazor TextBox Customization
Blazor TextBox Customization

Resource

For more information, refer to this Blazor TextBox Customization project.

Conclusion

I hope you now have a clear idea of how to create a custom component to completely customize the Blazor TextBox component. I encourage you to also explore the live demo of our Blazor TextBox.

Try our Blazor components by downloading a free 30-day trial or by downloading our NuGet package. Feel free to have a look at our online examples and documentation to explore other available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our support forums or Direct-Trac. We are always happy to assist you!

Related blogs

Discussion (0)