how to allow only English characters in textbox

[Aleqsandre]

Hello,

how to allow only English  characters  in textbox

[Berly Christopher]

Hi Aleqsandre, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by validating the entered value with regular expression as mentioned in the below code example which is used to allow the user to enter only alphabets in the TextBox component. 

  

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.Buttons 

@using System.ComponentModel.DataAnnotations 

 

<EditForm Model="model"> 

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

        <SfTextBox Placeholder="Enter your name" FloatLabelType='@FloatLabelType.Auto' @bind-Value="model.FirstName"></SfTextBox> 

        <ValidationMessage For="() => model.FirstName" /> 

    </div> 

    <div class="mt-3"> 

        <SfButton CssClass="e-small e-info" Type="submit" Content="Submit"></SfButton> 

    </div> 

</EditForm> 

@code{ 

    public Test model = new Test(); 

    public class Test 

    { 

        [RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please enter alphabet only")] 

        public string FirstName { get; set; } 

    } 

} 

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_Alphabets_159348-422160278  

  

Regards, 

Berly B.C 

[Aleqsandre]

hello ,
thank you for replay, but I need when someone enters non latin letters, in text box nothing should be added, in your example non latin letters appear in text box.
and if possible automaticaly to switch to latin keyboard

[Berly Christopher]

Hi Aleqsandre, 

  

We can restrict the user to prevent for entering the non-alphabets with help of JS interop since we could not prevent the event action in the server-side. So, we have prepared the sample based on the requested requirement and attached it below. 

  

Also, we could not change the Latin keyboard through programming. So, we have prepared the sample based in the en-US keyboard characters. 

  

[index.razor] 

<SfTextBox ID="textbox" Placeholder="Enter your name" FloatLabelType='@FloatLabelType.Auto' @bind-Value="FirstName" Created="OnCreate"></SfTextBox> 

 

@code{ 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    public string FirstName { get; set; } 

    public async Task OnCreate() 

    { 

        await JsRuntime.InvokeVoidAsync("onCreate", "textbox"); 

    } 

} 

[wwwroot/daterange.js] 

window.onCreate = (id) => { 

    document.getElementById(id).addEventListener("keydown", function (e) { 

        var letters = /^[A-Za-z]+$/; 

        if (e.key.match(letters)) { 

            return true; 

        } 

        else { 

            e.preventDefault(); 

        } 

    })     

} 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Date_App-1788988206  

  

Regards, 

Berly B.C